CODEWITHSUNDEEP
jquery
Keulovic
Keulovic

Reputation: 13

jquery: getting child element on click event

I'm working on a little solution for our SharePoint-Intranet. Therefor I need a typical FAQ-Webpart like

Question 1

Answer 1

Question 2

Answert 2

and so on.

I want the answer to toggle by clicking the question. Per default, all answers are hidden, and when I click one question, the answer to this question shows up.

But it don't work.

My Code looks like this:

<div class="faqWebpartWrapper">
    <div class="faqContainer">
        <a class="faqFrage" href="#">Question 1</a><br />
        <span class="faqAntwort">Answer 1</span>
    </div>
     <div class="faqContainer">
         <a class="faqFrage" href="#">Question 2</a><br />
        <span class="faqAntwort">Answer 2</span>
    </div>
</div>

$(".faqAntwort").hide();

$(".faqContainer").on("click", ".faqFrage", function(event) {
    console.log("clicked");   
    $(this).find(".faqAntwort").show();
});

Here is a link to jsfiddle: http://jsfiddle.net/TJ22g/

I think the solution to my problem is pretty simple, but I'm not quite familiar to jquery (so far!), so I would be grateful if anyone could give me a tip.

Thank you!

Upvotes: 1

Views: 77

Answers (4)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85583

Use next() method as it is the next sibling:

$(this).next(".faqAntwort").show();

Upvotes: 0

SagarPPanchal
SagarPPanchal

Reputation: 10131

You may use closest() like $(this).closest('.faqContainer').find(".faqAntwort").show();

Upvotes: 0

Felix
Felix

Reputation: 38112

You can use .siblings() since .faqAntwort span is the sibling of clicked .faqFrage anchor:

$(".faqAntwort").hide();

$(".faqContainer").on("click", ".faqFrage", function(event) {
    console.log("clicked");   
    $(this).siblings('.faqAntwort').show();
});

Updated Fiddle

Upvotes: 2

Satpal
Satpal

Reputation: 133443

.faqAntwort is no a child of .faqFrage, its a sibling. You can use one of these methods.

Use

 $(this).parent().find(".faqAntwort").show();

OR

 $(this).closest('.faqContainer').find(".faqAntwort").show();

OR

 $(this).siblings('.faqAntwort').show();

Upvotes: 4

Related Questions