CODEWITHSUNDEEP
javascriptjqueryhtmlcss
conor.ob
conor.ob

Reputation: 97

Show/Hide text using jquery

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.

Upvotes: 5

Views: 44857

Answers (6)

emerson.marini
emerson.marini

Reputation: 9348

You have some issues to get sorted out in your markup, and after that you can achieve this by doing like that:

<!-- 
Notice your divs with class equal button have missing closing tags.
I've added them.
Also, I've added a data-rel attribute to each one of them to refer
to your related item to show/hide.
-->
<div class="button" data-rel="1">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button" data-rel="2">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button" data-rel="3">
    <div class="button float_l"><a href="#">More..</a></div>
</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>

...

$(function () {
    // Hide all elements which id starts with text.
    $("[id^=text]").hide();

    $(".button").click(function () {
        // Look for the element with id equals text + 
        // the clicked element data-rel value.
        $("#text" + $(this).data("rel")).toggle();
    });
});

Demo

jQuery reference

You can also achieve the expected result by relying in the elements indexes:

<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</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>

...

$(function () {
    // Hide all elements which id starts with text.
    $("[id^=text]").hide();

    // Just for the elements with class equals
    // button but not with class float_l.
    $(".button:not(.float_l)").click(function (e) {
        e.stopPropagation();

        // Look for the element which index matches
        // the clicked one.
        $("[id^=text]").eq($(this).index()).toggle();
    });
});

Demo

jQuery reference

Upvotes: 1

Elfayer
Elfayer

Reputation: 4561

Is this what you are looking for ?

JS :

$("#text1").hide();
$("#text2").hide();
$("#text3").hide();

$("#button1").click(function(){
    $("#text1").toggle();
});

$("#button2").click(function(){
    $("#text2").toggle();
});

$("#button3").click(function(){
    $("#text3").toggle();
});

HTML:

<div id="button1"><div class="button float_l"><a href="#">More..</a></div></div>
<div id="button2"><div class="button float_l"><a href="#">More..</a></div></div>
<div id="button3"><div class="button float_l"><a href="#">More..</a></div></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>

JSFIDDLE

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

As I mentioned in comment: You need one click handler and add a data attribute to the buttons that you can use to select the correct text element.

Example: http://jsfiddle.net/TrueBlueAussie/t93gf/

$(document).ready(function () {
    $('.para').hide();
    $(".button").click(function () {
        // Hide all paragraphs
        $('.para').hide();
        // Show the selected paragraph
        $('#' + $(this).data('id')).show();
    });
});

Upvotes: 0

PrashantJ
PrashantJ

Reputation: 457

<div class="button"><div class="button float_l" t="1"><a href="#">More..</a></div>
 <div class="button"><div class="button float_l" t="2"><a href="#">More..</a></div>
 <div class="button"><div class="button float_l" t="3"><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>

JS:

$(document).ready(function () {
 $(".button").click(function(){
     $("#text" + $(this).attr('t')).toggle();
 }); 
});

Fiddle:

http://jsfiddle.net/pgZWA/

Upvotes: 5

Pablo Matias Gomez
Pablo Matias Gomez

Reputation: 6813

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();
    });
});

Upvotes: 7

Dave Salomon
Dave Salomon

Reputation: 3287

There's a couple of different ways of approaching this. The most simple would be having a different ID on button, which corresponds to each paragraph.

JS

$('#btn1').click(function(){
    $('#text1').toggle();
});
$('#btn2').click(function(){
    $('#text2').toggle();
});

HTML

<p id="text1">Foo</p>
<p id="text2">Bar</p>
<input type="button" id="btn1" value="Toggle P1" />
<input type="button" id="btn2" value="Toggle P2" />

You could (instead of an ID for each button, use a data-* attribute. e.g.

JS

$('.button').click(function(){
    var id = $(this).attr('data-pid');
    $('#text'+id).toggle();
});

HTML

<p id="text1">Foo</p>
<p id="text2">Bar</p>
<input type="button" class="button" data-pid="1" value="Toggle P1" />
<input type="button" class="button" data-pid="2" value="Toggle P2" />

Upvotes: 0

Related Questions