CODEWITHSUNDEEP
jquerytextclicktoggle
estellechvl
estellechvl

Reputation: 335

toggle text with jQuery

i want to change the text on the first click on cta-end h1 from Modification to close and then, when you click a second time --> close --> modification and so on. i want the text to toggle.

here is my HTML

    <div id="cta-end">
     <h1>Modification</h1>
    </div>

<div id="bloc1"><h3>BLOC 1</h3></div>
<div id="bloc2"><h3>BLOC 2</h3></div>

jQuery

$(document).ready(function () {


    $('#cta-end').click(function () {
        $('#bloc1,#bloc2').toggle();
    });

});

I've tried to find the solution on stack, but did not find..

here's the demo

thank you :)

Upvotes: 1

Views: 216

Answers (4)

Eli
Eli

Reputation: 14827

You can use:

 $('#cta-end').click(function () {
    $('#bloc1,#bloc2').toggle();
    $(this).children().text(($(this).children().text()=="Modification")?"close":"Modification");
});

Upvotes: 4

Nomad101
Nomad101

Reputation: 1698

Change your event handler to this one and it should work correctly.

 $('#cta-end').click(function () {
    $('#bloc1,#bloc2').toggle();
    if($('#bloc1').css("display") != "none"){
        $('#cta-end h1').text("Close");
    }
    else
    {
        $('#cta-end h1').text("Modification");
    }

});

Upvotes: 2

Kasyx
Kasyx

Reputation: 3200

Maybe just: http://jsfiddle.net/g4Rw5/6/

<div id="cta-end">
    <h1 class='toggle'>Modification</h1>
    <h1 class='toggle' style="display: none;">Close</h1>
</div>

And then add .toggle to your selector:

$('#cta-end').click(function () {
     $('#bloc1,#bloc2,.toggle').toggle();
});

Upvotes: 1

bipen
bipen

Reputation: 36551

using children() to get the text inside <h1> and if ternary condition..

try this

 $('#cta-end').click(function () {
    $(this).children().text(($(this).children().text()=="Modification")?"close":"Modification");

     $('#bloc1,#bloc2').toggle();
});

fiddle here

Upvotes: 1

Related Questions