Toggling Multiple DIVs with JQuery: Codes Included

Question

I need help toggling multiple divs with the codes below. It works well with one div but I will multiple divs would be looped with php so it will be impossible to target each loop to give unique IDs or classes.

Below are the codes, please help out with the 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 are the 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>

Answer 1

Try this:

jsFiddle Demo

First, surround each content DIV + buttons in a container DIV.

Then, use jQuery traversal methods siblings() and prevAll() to toggle the appropriate DIVs.

---

HTML:

<div class="container">
    <div class="more-content">
          Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore — While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. "'Tis some visiter," I muttered, "tapping at my chamber door — Only this and nothing more."
    </div>
    <button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
    <button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
</div>
<div class="container">
    <div class="more-content">
          The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. 
    </div>
    <button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
    <button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
</div>
<div class="container">
    <div class="more-content">
          Whatsoever things are true, whatsoever things are honest, whatsoever things are just, whatsoever things are pure, whatsoever things are lovely, whatsoever things are of good report; if there be any virtue, and if there be any praise, think on these things. 
    </div>
    <button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>
    <button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button>
</div>

jQuery:

$(document).ready(function(){
    $('#hide, .more-content').hide();

    $('#hide, #show').on('click', function(){
        $(this).prevAll('.more-content').toggle('slow');
        $(this).siblings('button').toggle();
        $(this).toggle();
    });

});

Answer 2

When working with repeating components you don't want to use ID's you want to use common classes for common elements. Then you use an outer container for each repeating "module".

Then you can isolate components within each "module" by only searching within that module instance

HTML - can repeat as many <article> as you want, the script will work for all 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 be done with css not js

$('.hide, .show').on('click', clickHandler);

function clickHandler() {
   $(this).toggle()
           .siblings('.hide, .show')
           .toggle()
           // only toggle more-content within this instance of <article>
           .parent().find('.more-content')
           .toggle('slow');
}

Answer 3

You must give to your divs the same class, in example 'my-class' and hide or show them depend on button clicked.

$(document).ready(function(){
    $('#hide').on('click', function(){
         // Hide all elements which have my-class class
         $('.my-class').hide();
    });

    $('#show').on('click', function(){
         // Show all elements which have my-class class
         $('.my-class').show();
    });
});

You can too get elements by attribute value. In example by id value

$('[id=test]')

If you give to your elements ids prefix, you should be able to get all of them by this expression

$('[id^=test]')

By changing ^ mark to $ you can search elements with specified postfix

Answer 4

Hmmm... looks like i took too much time trying to write a response. Anyway here's another just not to let it go to waste.

js:

function clickHandler() {
  console.log($(this).data('link'))
  var link = $(this).data('link');
  $('.hide[data-link=' + link + ']').toggle();
  $('.show[data-link=' + link + ']').toggle();
  $('.more-content[data-link=' + link + ']').toggle('slow');

}

$(document).ready(function(){
    $('.hide, .more-content').hide();
    $('.hide, .show').on('click', clickHandler);
});

HTML:

    <div class="more-content" data-link="0">
      <!--These are the contents-->               
    </div>
    <button class="hide" class="more_arrow" data-link="0">Collapse <span class="fa fa-chevron-up"></span></button>

<button class="show" class="more_arrow" data-link="0">Expand <span class="fa fa-chevron-down"></span></button>
    <div class="more-content" data-link="1">
      <!--These are the contents-->               
    </div>
    <button class="hide" class="more_arrow" data-link="1">Collapse <span class="fa fa-chevron-up"></span></button>

<button class="show" class="more_arrow" data-link="1">Expand <span class="fa fa-chevron-down"></span></button>
    <div class="more-content" data-link="2">
      <!--These are the contents-->               
    </div>
    <button class="hide" class="more_arrow" data-link="2">Collapse <span class="fa fa-chevron-up"></span></button>

<button class="show" class="more_arrow" data-link="2">Expand <span class="fa fa-chevron-down"></span></button>

Essentially, you'll need a variable to specify which button should link to which div. Then you need to put that variable in an attribute of some sort. I chose a data attribute named 'link' but you could also use a class name.

Answer 5

You can target the currently clicked div using $(this) within the handler, so

function clickHandler() { 
   $(this).toggle(); 
 }

Will toggle the currently clicked div.

You can toggle a nearby div to the one clicked using this

 $(this).nearest('.someclass').toggle(); 

Use classes where you have repeating elements you want to access.