-1

I have a FAQ page where I am trying to get a certain answer to show when a certain question is clicked.

Here is a fiddle: http://jsfiddle.net/hdr6shy9/

Here is the code:

HTML:

<div class="questions">
    <div>First Question</div>
    <p>Answer to first questions</p>
    <div>Second Question</div>
    <p>Answer to second Question</p>
    <div>Third Question</div>
    <p>Answer to third question</p>
</div>

CSS:

.questions div{
    cursor:pointer;
    margin:10px 0;
}

p{
    display:none; 
    background-color:#f4f4f4;
    padding:10px;
}

I want the p to show according to the correct div question that is clicked. Any help? Thanks

Chipe
  • 4,641
  • 10
  • 36
  • 64
  • Look at all the high rep users lining up to write code for free. Amazing. – Chris Baker Aug 27 '14 at 16:29
  • Is that a bad thing? – Chipe Aug 27 '14 at 16:34
  • Yes. The intention of the site is the build a repository of questions and answers that are useful for programmers in general; it isn't about just helping you specifically. What is your question here? There isn't one. What is the problem to be solved? The problem is "I don't have code". How is a solution for that problem going to help anyone **else**? It helped you, great, but that isn't what the site is for. Check out http://stackoverflow.com/help/how-to-ask. You got an answer here, but it is ultimately clutter because the question and answers aren't *generally* useful. – Chris Baker Aug 27 '14 at 16:41
  • Not to go on a total rant here, but also, did this really help you? It solved your immediate need, but what about the next thing you try to make? Most people learned to program by solving problems and finding their way past obstacles. It doesn't appear, based on this, that you even attempted to figure this out. Someone told you what to do. So you're just as stuck on the next thing as you were on this. – Chris Baker Aug 27 '14 at 16:44
  • _The problem is "I don't have code"._ I agree, but there are thousands of questions on here of that type that are highly upvoted and helpful. For example: http://stackoverflow.com/q/596351/1646783. That being said, @chipe, it would probably be a lot more beneficial to search the jQuery docs which are very informative on how to do things like this. http://api.jquery.com/category/selectors/ – jlars62 Aug 27 '14 at 16:51
  • @jlars62 There are numerous Meta discussions on the subject, but one take-away is that "highly upvoted" does not necessarily equate with "generally useful". Also, the standards have shifted over the years as the volume of questions has greatly increased. Even so, the question you linked still has a **programming problem** -- there's code, but it does not perform as expected. In this case, there's no programming problem because there's no programming. – Chris Baker Aug 27 '14 at 16:54
  • It did help me actually. And I did try to figure it out. I was just off on what I was using. And now I know for next time, more of what I could use. Sorry I am new to this, and still trying to figure things out, but yes I did try to do it myself before I came here. I am to a point where I understand what is going on, but still have trouble putting it together in my head. The answer completely makes sense to me, and next time I am that much closer to not needing to come here. I am sorry you dont like helping others out. But for me it was beneficial, and I do think this could also help others – Chipe Aug 27 '14 at 19:50
  • I didn't get the rep points I have by not helping people. Try to respect the site's goals and policies, take advice. – Chris Baker Aug 28 '14 at 04:36

5 Answers5

2

Use this code:

$(".questions div").on('click', function() {
    $(".questions p").hide();
    $(this).next().show();
});

This will show the next element of the div that is being clicked, you have to know that if there is going to be another elements, then there will be a different login (such as using classes, for example, or use .next('p') to make sure that you are getting selected the p element only).

Fiddle updated and working: http://jsfiddle.net/hdr6shy9/8/

Pablo Matias Gomez
  • 6,614
  • 7
  • 38
  • 72
1

Not too bad, here is a way:

$('.question').click( function() {
   $(this).next('p').show(); 
});
No_Mad
  • 21
  • 2
0

You can use Jquery for that:

$( ".questions div" ).click(function() {
  $( this ).next().show();
});

http://jsfiddle.net/hdr6shy9/5/

ltalhouarne
  • 4,586
  • 2
  • 22
  • 31
0

Here is a fiddle showing a possible way of achieving this:

$('.question').click( function() {
   $(this).next('p').show(); 
});

http://jsfiddle.net/d0qhm4xv/1/

Stuart Miller
  • 647
  • 3
  • 8
0

I would recommend you to add an id attribute to question div and answer p , Why? Maybe in the future you need to restructure your FAQ page and it will be easy to mantain.

<div class="questions">
    <div id="1">First Question</div>
    <p id="a1">Answer to first questions</p>
    <div id="2">Second Question</div>
    <p id="a2">Answer to second Question</p>
    <div id="3">Third Question</div>
    <p id="a3">Answer to third question</p>
</div>

$('.questions div').click(function(){        
    var qid = $(this).attr('id');
    $('#a'+qid).show();
});

If in the future you change your HTML like this:

<div class="questions">
    <div id="1">First Question</div>
    <div id="2">Second Question</div>
    <div id="3">Third Question</div>
</div>
<div class="answers">
    <p id="a1">Answer to first questions</p>
    <p id="a2">Answer to second Question</p>
    <p id="a3">Answer to third question</p>
</div>

The same javascript code will work.

Otherwise, @lolkidoki solution is what you need.

rogelio
  • 1,541
  • 15
  • 19