jQuery button to show/hide multiple divs with same id

Question

I have many products being populated dynamically, all with same id and class names. I want each "Buy Now" button to have its own div that toggles with click of button.

I do have the ability to assign an incrementing number index to the ids and classes, however, if there's a way to avoid it, I don't want to manually list each unique id and class to target each click function.

What's the best way to accomplish this?

Here's what I have now...

HTML:

 <button class="btn button-success clickme">Buy Now</button>
 <div class="book" style="display: none;">
     <!-- content here -->
 </div>

 <button class="btn button-success clickme">Buy Now</button>
 <div class="book" style="display: none;">
     <!-- content here -->
 </div>

jQuery:

$( ".clickme" ).click(function() {
  $( ".book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

In HTML, IDs are considered to be unique, so you can't have multiple elements with the same ID. jQuery will simply select the first one it finds. It you chagne `id="clickme"` to `class="clickme"`, and then used the `".clickme"` selector, your code would be more correct. — EyasSH, Jun 10 '15 at 21:17
http://stackoverflow.com/questions/7505350/why-is-it-a-bad-thing-to-have-multiple-html-elements-with-the-same-id-attribute — AmmarCSE, Jun 10 '15 at 21:17
Using same id for multiple elements is not a good design. And also use class attribute `btn button-success` instead to bind common event to all buttons. — Amit.rk3, Jun 10 '15 at 21:19
Doing that just opens all the divs with `class="book"`. I've edited my code above accordingly. — frshjb373, Jun 10 '15 at 21:25
you may also want to look into $(this) in jquery. that will help with all of the divs opening at once. — NewsletterPoll, Jun 10 '15 at 21:25

score 2 · Accepted Answer · answered Jun 10 '15 at 21:30

Ignoring thoughts surrounding using the same ID for multiple elements on the same page you have access to this in your function to show the book div.

Example switching from using #clickme to attach the click event listener to .button-success:

HTML

<button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     content
 </div>

 <button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     content
 </div>

 <button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     Content here
 </div>

 <button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     content
 </div>

JQUERY

$( ".button-success" ).click(function() {
    $(this).next(".book").slideToggle( "slow", function() {
    // Animation complete.
  });
});

What this is doing:

When a user clicks on any .button-success it looks for the next .book div and toggles the content.

demo: http://jsfiddle.net/9zaLtmaf/

score 1 · Answer 2 · answered Jun 10 '15 at 21:23

1

You can update your code like this

HTML

 <button class="btn button-success" id="clickme1">Buy Now</button>
 <div class="book" id="book1" style="display: none;">
     <!-- content here -->
 </div>

 <button class="btn button-success" id="clickme2">Buy Now</button>
 <div class="book" id="book2" style="display: none;">
     <!-- content here -->
 </div>

JS

$(".button-success").click(function(){
         var divToToggleId = $(this).attr("id").replace("clickme", "book");
         var divToToggleElement = $(divToToggleId);
         // Write your cod here.

})

answered Jun 10 '15 at 21:23

Nikhil Aggarwal

28,197
4
43
59

@frshjb373 - checked my answer, did that worked for you? – Nikhil Aggarwal Jun 10 '15 at 21:27
@frshjb373 - Please mark the answer as selected if that worked for you. Good night from my side :) – Nikhil Aggarwal Jun 10 '15 at 21:32

score 0 · Answer 3 · answered Jun 09 '20 at 07:07

function ShowElement(elementID)
{
    if (elementID.length > 0) {
        if ($("[id='" + elementID + "']").length > 0) {

                $("[id='" + elementID + "']").each(function (index) {
                    $(this).show();
                });               
        }
    }
}


function HideElement(elementID)
{
    if (elementID.length > 0) {
        if ($("[id='" + elementID + "']").length > 0) {

                $("[id='" + elementID + "']").each(function (index) {
                    $(this).hide();
                });               
        }
    }
}

Hi, thank you for your contribution. Please add some explanation as to how this code will fix the problem so visitors will be able to determine if this is the right solution. — Rmaxx, Jun 09 '20 at 07:17

jQuery button to show/hide multiple divs with same id

3 Answers3