How do I construct the click event (involves jQuery selectors)

Question

I programmatically build a three-level set of DIVs.

Category A
(Title1)
(Content)
(Title2)
(Content)
Category B
Category C

By default, I set levels 2 and below (titles and content) to display:none. With this code, I show all titles belonging to the category clicked:

    $("#catA").on("click", function() {
        $("#catA .itemTitle").css("display", "block");
    });
    ...

Now what I want to do is to show the content just for the title clicked. That seems to have exceeded my knowledge of selectors! Any ideas?

Can you show your html.

Adil Shaikh
– Adil Shaikh

2013-05-10 12:11:53 +00:00
Commented May 10, 2013 at 12:11 — Adil Shaikh
– Adil Shaikh, Commented May 10, 2013 at 12:11

Jai · Accepted Answer · 2013-05-10 12:18:11Z

1

You can try to bind the click event to the .itemTitle and show the next content of it, (If you are using jQuery then no need to use display block to show the hidden element simply you can use show() method):

$('.itemTitle').on('click', function(){
  $(this).next('.content').show();
});  //---------^^^^^^^^-------------my assumption of class change to yours

answered May 10, 2013 at 12:18

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

2 Comments

Jai Over a year ago

yes! this is just an assumption as OP has not posted any html markup and it looks like he has itemTitle div first then content div.

Jai Over a year ago

By default, I set levels 2 and below (titles and content) to display:none. this line made me to assume something like this.

Somnath Kharat · Accepted Answer · 2013-05-10 12:25:49Z

0

Try this:

$(".itemTitle").on("click", function() {
        $(".itemTitle >.content").css("display", "block");
    });

edited May 10, 2013 at 12:25

answered May 10, 2013 at 12:16

Somnath Kharat

3,5952 gold badges31 silver badges51 bronze badges

1 Comment

Michael Broschat Over a year ago

Thank you, Somnath. With my interpretation of Jai's suggestion, here is what now works: $("#catA").on("click", function() { $("#catA .itemTitle").css("display", "block"); $("#catA .itemTitle").on("click", function() { $(this).next(".itemContent").css("display", "block"); }); }); Is that what you intend, as well?

Collectives™ on Stack Overflow

How do I construct the click event (involves jQuery selectors)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related