JQuery change text on click (Also change back)

Question

I have a div with a p inside it that says 'Fold it!'. When I click the div, the p's text changes to 'Expand it'. How can I make so when I click the div for the second time it will change back to 'Fold it'?

HTML:

<div id="fold">
    <p id="fold_p">Fold it</p>
</div>

JQuery:

<script>
  $(document).ready(function () {
    $("#fold").click(function () {
      $("#fold_p").text("Expand it");
    } )
  } );                  
</script>

Also, is it possible to make the transition a fade? Any help is much appreciated :)

possible duplicate of Button text toggle in jquery

Ram
– Ram

2014-01-30 14:49:57 +00:00
Commented Jan 30, 2014 at 14:49 — Ram
– Ram, Commented Jan 30, 2014 at 14:49

j08691 · Accepted Answer · 2014-01-30 14:50:52Z

11

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Fold it') ? 'Expand it' : 'Fold it').fadeIn();
        })
    })
});

jsFiddle example

answered Jan 30, 2014 at 14:50

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaul Bar-Lev Over a year ago

Wow, this works great. but, is there any chance I can specify the fadeout duration?

j08691 Over a year ago

Sure, just make the duration the first argument to the fade functions. See jsfiddle.net/j08691/BdQU2/2. Ex: $("#fold_p").fadeOut(2000,function () {

Arunkumar Srisailapathi · Accepted Answer · 2014-01-30 14:52:00Z

0

jQuery ("#fold")    .click (function () {
        if (jQuery (this).children ("#fold_p").text() == "Fold it") {
                jQuery (this).children ("#fold_p").text("Expand It");
        }
        else {
             jQuery (this).children ("#fold_p").text("Fold it");        
        }
    });

Above is the sample code for your question.

Here is the fiddle link: http://jsfiddle.net/teZQA/

answered Jan 30, 2014 at 14:52

Arunkumar Srisailapathi

1,1692 gold badges8 silver badges28 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2014-01-30 14:53:07Z

0

Fiddle Demo

$(document).ready(function () {
    var fold = $("#fold");
    fold.cliked = 1;// set initial click value to 1
    fold.click(function () {
    //change text o base of even or odd
        $("#fold_p").text((fold.cliked++ % 2 == 0) ? "Fold it" : "Expand it");
    });
});

answered Jan 30, 2014 at 14:53

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

Rami.Q · Accepted Answer · 2014-01-30 14:53:56Z

0

try this:

<script>
$(document).ready(function () {
  $("#fold").click( function (){
    if($(this).hasClass("helperClass")){
     $(this).find("p").text("Expand it");

    }else{
      $(this).find("p").text("Fold it");
    }
    $(this).toggleClass("helperClass");
  });
});                  
</script>

answered Jan 30, 2014 at 14:53

Rami.Q

2,4763 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

JQuery change text on click (Also change back)

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related