selecting multiple instances with jquery

Question

I have this jQuery statement :

$(document).ready(function() {
$('#toggle-link').click(function(){
$(this).text($(this).text() == '+' ? '-' : '+');
 $('#box-to-toggle').toggle();

});
});

I have several instances of the #box-to-toggle so when i click on the #toogle-link link every instance of the box opens and closes. Can anyone tell me how to resolve this so the link only opens the box in the same div. here is the html structure.

<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>
<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>
<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>
<div id='holder'>
    <div id='toggle-link'>+</div>
    <div id='box-to-toggle'>
        <!-- hide / show content here -->
    </div>
</div>

Any help would be appreceatied

Use this it will give reference to only which is clicked .

rahularyansharma
– rahularyansharma

2013-04-12 08:26:33 +00:00
Commented Apr 12, 2013 at 8:26 — rahularyansharma
– rahularyansharma, Commented Apr 12, 2013 at 8:26

Samuli Hakoniemi · Accepted Answer · 2013-04-12 08:25:23Z

4

Multiple id's are bad for your health, so change those into classNames. And then:

$(this).parent().find(".box-to-toggle").toggle();

answered Apr 12, 2013 at 8:25

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

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

Comments

Jai · Accepted Answer · 2013-04-12 08:36:31Z

See in your markup there are some ids which are instanced to multiple elements in a single page. There are multiple #holder, #toggle-link and #box-to-toggle.

This would be better if you change your id notation to class, so your markup should now change id to class:

<div class='holder'>
   <div class='toggle-link'>+</div>
   <div class='box-to-toggle'>
       <!-- hide / show content here -->
   </div>
</div>
.....more divs......

and jQuery is fine just one change, don't toggle the div with class name instead you can use .next(), .siblings():

with `.next()`:

$('.toggle-link').click(function () {
   var $this = $(this);
   $this.text($this.text() == '+' ? '-' : '+');
   $this.next('.box-to-toggle').toggle();
});

with `.siblings()`:

$('.toggle-link').click(function () {
   var $this = $(this);
   $this.text($this.text() == '+' ? '-' : '+');
   $this.siblings('.box-to-toggle').toggle();
});

and # id notation change to . class notation.

palaѕн · Accepted Answer · 2013-04-12 08:40:02Z

1

As all the answers suggest, go for unique id always and use class in place of id for the current question you have asked:

$('.toggle-link').click(function () {
    $(this).text($(this).text() == '+' ? '-' : '+');
    $(this).next("div.box-to-toggle").toggle();
});

answered Apr 12, 2013 at 8:40

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

guessimtoolate · Accepted Answer · 2013-04-12 08:28:04Z

0

One way to make it work would be:

$(document).ready(function() {
    $('#toggle-link').click(function(){
        var $this = $(this);
        $this
            .text($this.text() == '+' ? '-' : '+')
            .siblings('#box-to-toggle').toggle();
    });
});

BTW. I don't think it's a good idea for multiple elements to share the same id. Using a class would be more logical to me.

answered Apr 12, 2013 at 8:28

guessimtoolate

8,6722 gold badges21 silver badges26 bronze badges

Collectives™ on Stack Overflow

selecting multiple instances with jquery

4 Answers 4

Comments

with `.next()`:

with `.siblings()`:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

with .next():

with .siblings():

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

with `.next()`:

with `.siblings()`: