5

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.

1
  • 1
    You have hooked up the click event twice, to all 3 buttons! You need one click handler and add a data attribute to the buttons that you can use to select the correct text element. Jul 11, 2014 at 16:06

6 Answers 6

7

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();
    });
});
5
  • 1
    I tried this method and it worked perfect! Thanks for your help! One other thing, though, when I press the button to hide or show the page scrolls up o the very top - is there any way of stopping this from happening?
    – conor.ob
    Jul 11, 2014 at 16:36
  • Yes, that's because the href="#", you can replace it with href="" and it will not scroll anywhere. Try it out! Jul 11, 2014 at 16:41
  • no that dosent seem to work, after removing the # when I click the button the page jumps for a second and then dosent even show the text?
    – conor.ob
    Jul 11, 2014 at 16:59
  • Well, you can remove the entire tag: <div id="btn3" class="button">More..</div> Jul 11, 2014 at 17:07
  • 1
    Why did you repeat the same code over and over? What if there will be hundreds of buttons/paragraphs? Jul 11, 2014 at 18:16
5
<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/

1

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

1
  • yes , I realised my main problem was not having the buttons named individually. Thanks for your help
    – conor.ob
    Jul 11, 2014 at 16:38
1

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

0

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" />
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.