Question

I have an element that when clicked it slides down to show the rest of the content, it says “Show More Information“.

What I need is to change that text when clicked to expand to say “Show Less Information“, but then change it back to “Show More Information” when collapsed.

Here’s a fiddle that can be used as a starting point: http://jsfiddle.net/QWB4J/1/

I tried using .replaceWith but it only works when expanding and not collapsing.

Any help it’s greatly appreciated.

EDIT-

Here’s a fiddle with the solution: http://jsfiddle.net/QWB4J/24/

Solution provided by willw.

Answer 1

You can add something like this after the toggleClass call:

  $(".desc").html($(".desc").hasClass("collapse") ? "Less" : "More");

Hope it helps