How to stay within a 'instance' using JQuery

Question

I'm currently learning JavaScript/JQuery, but have an issue at work that I'm running into.

I've assigned a class of 'question' to an<a>tag, and 'answer' to a<div>. When a user clicks on the question, the answer will slide down. However, the problem I'm running into is that when they click on a <a href="#" class="question">, all of the <div class="answer">'s are displayed.

How can I make it so that only one .answer for it's parent .question is displayed when clicked?

Here is my HTML:

<li class="question"><a href="#">Question 1</a>
<div class="answer"><p>This is answer for question 1</p></div></li>
<li class="question"><a href="#">Question 2</a>
<div class="answer"><p>This is answer for question 2</p></div></li>

Here is my jquery:

<script>
  jQuery(document).ready(function ($) {
    $('div.answer').hide();
    $('li.question').click(function() {
      $('div.answer').slideDown('fast');
      return false;
    });
  });
</script>

and the site is: http://topactioninvestments.com/faq/

Thanks!

"I've assigned a class of 'question' to an <a> tag" - No you haven't, you've assigned the class to the containing <li>. Also, the <div> for the answer is redundant: why not use <p class="answer">? (Surely you don't need the <div> and the <p>?) — nnnnnn
– nnnnnn, Commented Dec 11, 2012 at 19:57

epascarello · Accepted Answer · 2012-12-11 19:53:32Z

5

$('li.question').click(function(e) {
    $(this).find('div.answer').slideToggle('fast');
    e.preventDefault();
});

answered Dec 11, 2012 at 19:53

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

udoprog · Accepted Answer · 2012-12-11 19:58:14Z

0

Give every answer element an unique id attribute and add a data-answer attribute to the the the question that references the unique question.

The do the following.

$('li.question').click(function(e) {
    $($(this).data("answer")).show();
});

To clarify with the relevant html.

<li class="question" data-answer="#answer-42">...</li>
<div class="answer id="answer-42">....</div>

answered Dec 11, 2012 at 19:58

udoprog

1,86314 silver badges14 bronze badges

Comments

Cymen · Accepted Answer · 2012-12-11 20:02:44Z

0

What you typically want to do is have each unit within a container element. An example would be a div or other tag. Say your HTML looked like this:

<div class="qa">
  <div class="question">What is 2+2?</div>
  <div class="answer">4</div>
</div>

Then you could do:

$('.question').click(function(event) {
  var target = $(event.target);
  target
    .closest('.qa')
    .find('.answer')
      .show();
});

Your markup for each question and answer looks like this:

<li>
  <a><strong>Why do you not just sell these option contracts?</strong></a>
  <div class="answer"><p>This is a test</p></div>
</li>

For this markup, this JavaScript would work:

$('li').on('click', function(event) {
  $(this).find('.answer').show();
});

Demo: jsfiddle

edited Dec 11, 2012 at 20:02

answered Dec 11, 2012 at 19:56

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to stay within a 'instance' using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related