How to create multiple instances of show/hide div in jquery?

Question

I have the following code

$(document).ready(function() {
  $('a#slick-toggle').click(function() {
 $('#slickbox0').toggle(400);
 return false;
  });
});


<a id="slick-toggle" href="#">Show/Hide</a>

<div id="slickbox" style="display: none;">
hidden content here
</div>

The problem is, if there is more than 1 instance of this on the html part of this on the page, it wont work. Im not very good at JS. The div id I gotta make unique.... but how do I make each link toggle the corresponding box?

Answer 1

You shouldn't repeat IDs in your HTML. But you do want to use the same functionality in jQuery, so add a common class name so that you can apply the function to all of these anchors.

Also, since you're not sure about whether the HTML structure can be predictable, you'll need to output a link between anchor element and div element. Note the data-id attribute below:

<a id="someID" class="slick-toggle" data-id="334" href="#">Show/Hide</a>

<div id="someOtherID" class="slickbox" data-id="334" style="display: none;">
  hidden content here
</div>

This "334" could be anything. This would be something unique that you can decide on when you're outputting the content.

Now your code can target each .slick-toggle class, and have it toggle the associated div.

$(document).ready(function() {
    $('a.slick-toggle').click(function() {
        var dataID = $(this).attr("data-id");
        $("div[data-id=" + dataID + "].slickbox").toggle(400);
        return false;
    });
});

Answer 2

You could set up naming convention between your link and corresponding div.

<a id="toggle-box1" class="toggler">click/show</a>
<div id="box1">hide me</div>

And then set them up generically:

$(".toggler").click(function() {
 var targetId = $(this).attr("id").replace("toggle-", "");
 $("#" + targetId).toggle(400);
});

Answer 3

Not tested, but this uses .each and contextual selectors:

<div class="group">
    <a class="toggle" href="#">toggle</a>
    <div class="content-hidden">content!</div>
</div>

<div class="group">
    <a class="toggle" href="#">toggle</a>
    <div class="content-hidden">content!</div>
</div>

<div class="group">
    <a class="toggle" href="#">toggle</a>
    <div class="content-hidden">content!</div>
</div>

<style>
div.content-hidden { display:none; }
</style>

<script>
$('.group').each(function() {
    var toggle = $('.toggle', this), content = $('.content-hidden', this);
    toggle.click(function(e) {
        e.preventDefault();
        $(content).toggle();
    });
});
</script>

Answer 4

I asked a very similar question just a few days ago, as I had the same problem. It may help you! Lots of sample code is provided.

Answer 5

You need to connect the show/hide link with the appropriate box somehow. I would suggest using something like this:

<a class="slick-toggle" href="#slickbox1">Show slickbox 1</a>

<div class="slick-box" id="slickbox1">
 Hidden content here
</div>

<a class="slick-toggle" href="#slickbox2">Show slickbox 2</a>

<div class="slick-box" id="slickbox2">
 Hidden content here
</div>

<a class="slick-toggle" href="#slickbox3">Show slickbox 3</a>

<div class="slick-box" id="slickbox3">
 Hidden content here
</div>

<script type="text/javascript">
 jQuery(function(){
  $('a.slick-toggle').click(function(){
   $($(this).attr('href')).toggle(400);
  });
 });
</script>

This way each link's href attribute connects it to the appropriate div to toggle.

Answer 6

The bigmattyh method works fine for me!!! Thanks a lot!