There is, for example, a spoiler. It opens when we click on the toggler class, i.e. $('.toggler').click(function()) . And how to open it in two classes at the same time, for example: toggler and __header ?

 $(document).ready(function() { $('.toggler').click(function() { var spoiler = $(this).parent().parent(); var status = $(this).attr('hide-content'); if(status === 'true') { $(this).addClass('icon-minus').removeClass('icon-plus'); $(this).attr('hide-content', 'false'); let content = spoiler.find('.__content'); content.removeClass('__hidden'); } else { $(this).addClass('icon-plus').removeClass('icon-minus'); $(this).attr('hide-content', 'true'); let content = spoiler.find('.__content'); content.addClass('__hidden'); } }); }); 
 @import url('https://fonts.googleapis.com/css?family=Inconsolata'); body { background: #000C0B; margin: 0; padding: 0; } .spoiler { margin: 30px auto; background: #001514; max-width: 500px; font-family: 'Inconsolata', monospace; } .spoiler .__header { padding: 20px; color: #FFF; font-size: 13px; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.065); letter-spacing: 1px; position: relative; } .spoiler .__header i { position: absolute; right: 12.775px; top: 12.775px; border: 1px solid rgba(255, 255, 255, 0.165); color: rgba(255, 255, 255, 0.265); padding: 5px; cursor: pointer; } .spoiler .__content { padding: 20px; color: #FFF; font-size: 11px; text-align: justify; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.065); border-top: none; } .__hidden { display: none; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css"> <div class="spoiler"> <div class="__header"> test <i class="toggler feather icon-plus" hide-content="true"></i> </div> <div class="__content __hidden"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque nunc, eleifend at ligula ut, scelerisque rutrum quam. Vivamus gravida a neque vitae vehicula. Vestibulum in bibendum lorem. Integer sit amet porttitor sapien. Morbi gravida dictum purus, id vulputate ligula aliquet eget. Sed eget congue magna. Pellentesque congue, dui in rutrum ornare, justo mauris gravida felis, ut fringilla quam justo sed tortor. Fusce ornare dolor nec tincidunt lobortis. Pellentesque condimentum gravida felis, at porttitor urna. Aliquam feugiat vulputate dapibus. </div> </div> <div class="spoiler"> <div class="__header"> test <i class="toggler feather icon-minus" hide-content="false"></i> </div> <div class="__content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque nunc, eleifend at ligula ut, scelerisque rutrum quam. Vivamus gravida a neque vitae vehicula. Vestibulum in bibendum lorem. Integer sit amet porttitor sapien. Morbi gravida dictum purus, id vulputate ligula aliquet eget. Sed eget congue magna. Pellentesque congue, dui in rutrum ornare, justo mauris gravida felis, ut fringilla quam justo sed tortor. Fusce ornare dolor nec tincidunt lobortis. Pellentesque condimentum gravida felis, at porttitor urna. Aliquam feugiat vulputate dapibus. </div> </div>

  • Tk in your example __header parent toggler, then when you click on a toggler, click on __header will also work. Those can simply move the function to __header. Of course, you need to rewrite it because the item that caused the event will be different. - coder675
  • one
    But in the general case, if it really would be necessary to hang one function on different elements, you can simply describe the function separately. function myclick (e) {...}; and execute it in each element $ ('. toggler'). click (function () {myclick (this);}; $ ('__ header'). click (function () {myclick (this);}; Of course something else to take into account that this will be different. - coder675

0