Toggle content with jQuery

Question

I have a link "Show More...". When I click it I toggle visibility of a div with details. I wonder if there is a simple beautiful way to toggle content of the link between "Show More..." and "Hide details" when the div toggle occurs?

Answer 1

You could change the content thats being displayed using CSS rules: http://jsfiddle.net/8G6fm/

I guess the advantage is if you want to style it further you can add to the styles (e.g using a background image of an arrow pointing left / down depending on whether it is open or not).

Answer 2

I've used this before with some success:

http://plugins.learningjquery.com/expander/index.html

Answer 3

use html 5 http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_summary

Answer 4

If you just want to switch around text, here is a simple example in jQuery based on using a SPAN as a label.

$('#SpanLabel').html($('SpanLabel').text() == 'Show More...' ? 'Hide details' : 'Show More...');