Question

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.

Answer 1

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