Show/Hide text using jquery

css, html, javascript, jquery

Solution

First of all, you have to identify your different buttons, if you use the "button" class, you will always refer to the all 3 buttons.

Also you don't need to put a div element inside a p element.

So you can do something like this:

<div id="btn1" class="button"><a href="#">More..</a></div>
<div id="btn2" class="button"><a href="#">More..</a></div>
<div id="btn3" class="button"><a href="#">More..</a></div>   


<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>

Then, javascript:

$(document).ready(function () {

    $("p").hide();

    $("#btn1").click(function(){
         $("#p1").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });
});

Problem

Basically I have 6 buttons and 6 paragraphs (each one button relating to a specific paragraph). I want to show a paragraph of text when a certain button is clicked, and then hide that paragraph when the button is clicked again. I have looked through similar questions but cannot seem to get it to work. I think its because I have only started trying to use jquery and dont really understand the problem. All hep would be appreciated! thanks! html: ``` <div class="button"><div class="button float_l"><a href="#">More..</a></div> <div class="button"><div class="button float_l"><a href="#">More..</a></div> <div class="button"><div class="button float_l"><a href="#">More..</a></div> <p><div id="text1">Paragraph 1</div></p> <p><div id="text2">Paragraph 2</div></p> <p><div id="text3">Paragraph 3</div></p> ``` javascript: ``` $(document).ready(function () { $("#text1").hide(); $(".button").click(function(){ $("#text1").toggle(); $("#text2").hide(); $(".button").click(function(){ $("#text1").toggle(); }); ``` the first button should relate to the first paragraph and so on. Iv tried using the 'this' function to relate to a specific button but must be using it incorrectly because it dosent work.

Original source