CODEWITHSUNDEEP
javascriptjquery
user1941028
user1941028

Reputation:

Show hidden div (slide) when click on button (change text)

I have a page where I want to hide some content (#hidden_content) as default. On this page there is a CSS button with text example "Show content".

When click on this button I want the div #hidden_content to show with a slide effect and at the same time the text on the button "Show content" will change to example "Hide content" and when click the content will hide again.

Button

<a href="" id="button" class="button_style">Show content</a>

Div

<div id="hidden_content">Content</div>

Slide script

$(document).ready(function(){
  $("#button").click(function(){
    $("#hidden_content").slideToggle("slow");
  });
});

Now I want the text on the button so change when click. How do I do that?

Thanks.

Upvotes: 1

Views: 20585

Answers (4)

Ramesisiii
Ramesisiii

Reputation: 207

According to w3schools, the event method toggle() is removed after version 1.9. (Note: This is the event method toggle(), not the effect method toggle(). The effect method toggle() stays.)

Jai's answer is great, so I used his answer and modified it using if and else instead of toggle().

$(document).ready(function() {
    $(".button").click(function(){
        if($(this).text() == 'Show Content')
            $(this).text('Hide Content');
        else
            $(this).text('Show Content');
        $("#hidden_content").slideToggle("slow");
    });
});

Try it on JSFiddle Here.

Upvotes: 0

Jai
Jai

Reputation: 74738

Try this one: http://jsfiddle.net/dRpWv/1/

$(document).ready(function() {
  $("#button").toggle(function() {
    $(this).text('Hide Content');
  }, function() {
    $(this).text('show Content');
  }).click(function(){
      $("#hidden_content").slideToggle("slow");
  });
});

Upvotes: 2

LeGEC
LeGEC

Reputation: 51850

From the slideToggle doc page : you can add a callback which will be executed once the animation is completed

$('#hidden_content').sliddeToggle('slow', function(){
  if( $('#hidden_content').is(':hidden') ){
    $('#button').text('Show content');
  } else {
    $('#button').text('Hide content');
  }
})

Upvotes: 0

CassOnMars
CassOnMars

Reputation: 6181

jQuery has a text() function:

$("#button").text("change");

You can use this in your function:

$(document).ready(function(){
    $("#button").click(function(){
        $("#hidden_content").slideToggle("slow");
        $("#button").text("change");
    });
});

You can base it on whether or not the content is hidden:

$("#button").text($("#hidden_content").is(":hidden")?"Show content":"Hide content");

Make sure you use this after the content has been toggled.

Upvotes: 1

Related Questions