Question

I have two elements one in top of the other:

<form class="order-form"></form>
<a href="#" class="hide-details">Hide Details</a>

I’m using the jQuery slideToggle:

  // Show/Hide Details
   $("a.hide-details").click(function () {
    $(".order-form").slideToggle(0);
   });

I would like the text “Hide Details” to change to “Show details” after the form is collapsed. And when the form is expanded I would like to change the text to “Hide Details” again.

Any suggestions to accomplish this?

Answer 1

Just change the text of your anchor:

// Show/Hide Details
$("a.hide-details").click(function () {
  var $this = $(this);
  $this.prev(".order-form").slideToggle(0, function() {
    $this.text($(this).is(':visible') ? "Show details": "Hide details");
  });
});

EDIT prev to get the previous form