How to use jQuery toggle function multiple times

Question

I have a page that's going to have 30 or so id's. I want to toggle them open/closed without having to write the following 28 more times. How would I do this?

First one:

$(document).ready(function(){
    $("#one").hide();
    $("#hide1").click(function(){
        $("#one").slideToggle(2000);
    });
});

Second one:

$(document).ready(function(){
    $("#two").hide();
    $("#hide2").click(function(){
        $("#two").slideToggle(2000);
    });
});

Would it make more sense to change the id's to something like #toggle1 and then use the starts-with selector ^= or something of the like?

Here's a codepen with HTML and CSS and JS. codepen.io/kiddigit/pen/EKGBoB — Chris
– Chris, Commented May 6, 2016 at 13:18

kapantzak · Accepted Answer · 2016-05-06 16:34:18Z

1

I would recommend this markup:

<!-- The element to click -->
<button id="one" class="button">Button</button>

<!-- The element to toggle -->
<div class="target-button" data-trigger="one">...</div>

jQuery

// Attach an event listener for .button class
$(document).on('click', '.button', function() {
   // Find the .target-button element
   // that has a 'data-trigger' attribute value equal to the clicked element's id
   $('.target-button[data-trigger="' + $(this).attr('id') + '"]').slideToggle(2000);
});

NOTE

this returnes the clicked element (javascript DOM element).
$(this) is just the jQuery object of this

edited May 6, 2016 at 16:34

answered May 6, 2016 at 12:01

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

This is good. I'm going to have to play with it so content starts hidden. It also seems to hide all the IDs. I appreciate your help. I'll work with it and see what I can do.

Chris Over a year ago

This is going to make me look like a noob, but what is (this) doing? Can you point me to documentation on that?

Collectives™ on Stack Overflow

How to use jQuery toggle function multiple times

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related