javascript - Toggling Multiple DIVs with JQuery: Codes Included -

i need toggling multiple divs codes below. works 1 div multiple divs looped php impossible target each loop give unique ids or classes.

below codes, please out correct jquery

function clickhandler() { $('#hide').toggle(); $('#show').toggle(); $('.more-content').toggle('slow');  }  $(document).ready(function(){     $('#hide, .more-content').hide();      $('#hide, #show').on('click', clickhandler); }); 

html

<div class="more-content">       <!--these contents-->                </div>  <button id="hide" class="more_arrow">collapse <span class="fa fa-chevron-up"></span></button>  <button id="show" class="more_arrow">expand <span class="fa fa-chevron-down"></span></button> 

when working repeating components don't want use id's want use common classes common elements. use outer container each repeating "module".

then can isolate components within each "module" searching within module instance

html - can repeat many <article> want, script work instances independently

<article>     <div class="content"></div>     <div class="more-content"></div>     <button class="hide" class="more_arrow">collapse</button>     <button class="show" class="more_arrow">expand</button> </article> 

js

$('.hide, .more-content').hide();// should done css not js  $('.hide, .show').on('click', clickhandler);  function clickhandler() {    $(this).toggle()            .siblings('.hide, .show')            .toggle()            // toggle more-content within instance of <article>            .parent().find('.more-content')            .toggle('slow'); }