jQuery on multiple of the same divs, without using unique ID's?

Question

Problem in short: I'm trying to make a simple show/hide toggle work on just the element you click on, while right now all (13) divs get affected by the function.

Structure of each div looks like this

<div class="selectbox">
    <h5>Title</h5>
    <p>
        Content
    </p>
</div>

With this jquery code

$('.selectbox h5').click(function(){
         $('div.selectbox,p,span').toggle();
         $('.selectbox').toggle();
    });

So right now, the jquery works. But obviously, does its work on every "selectbox" div on the page. How can I make this work on just the element I click on, without using a unique id for every "selectbox" div?

Denys Séguret · Accepted Answer · 2012-09-14 14:49:47Z

4

$('.selectbox h5').click(function(){
     $(this).parent().find('p,span').toggle(); 
     $(this).parent().toggle(); // this line should probably be removed 
});

edited Sep 14, 2012 at 14:49

answered Sep 14, 2012 at 14:26

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

4 Comments

Carlo Ravelli Over a year ago

the 'p,span' line isn't useless ;) Works perfectly as you posted it, but not without that line

Denys Séguret Over a year ago

I was wondering. The last line is probably not desired in that case (if you'd want to toggle the thing back).

Denys Séguret Over a year ago

And you might be interested by this also.

Carlo Ravelli Over a year ago

Pretty much yes, with multiple checkboxes being the content.

Dipak · Accepted Answer · 2012-09-14 14:28:18Z

3

use $(this) -

$('.selectbox h5').click(function(){

  $(this).closest('.selectbox, p, span').toggle();
  //$('.selectbox').toggle();

});

answered Sep 14, 2012 at 14:28

Dipak

12.2k3 gold badges32 silver badges31 bronze badges

1 Comment

Jonas Stensved Over a year ago

We posted the same solution at the same time. I can't resist upvoting your answer :)

Jonas Stensved · Accepted Answer · 2012-09-14 14:26:58Z

2

You may use the keyword this in your function, it represents the item that triggered the event. In this case your H5.

$('.selectbox h5').click(function(){
         $(this).closest('.selectbox').toggle();
    });

answered Sep 14, 2012 at 14:26

Jonas Stensved

15.5k5 gold badges58 silver badges86 bronze badges

Comments

Jan. · Accepted Answer · 2012-09-14 14:26:53Z

1

Make it simple..

if you want the parent DIV to toggle then just use $(this).parent().toggle(); in your function. p.e.: If you want to work with the <p> in your div you may address it like $('p', $(this).parent()).toggle();

answered Sep 14, 2012 at 14:26

Jan.

2,00516 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery on multiple of the same divs, without using unique ID's?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related