Toggle replace text upon action(s)
<p>I have an element that when clicked it slides down to show the rest of the content, it says "<em>Show More Information</em>".</p>

<p>What I need is to change that text when clicked to expand to say "<em>Show Less Information</em>", but then change it back to "<em>Show More Information</em>" when collapsed.</p>

<p>Here's a fiddle that can be used as a starting point: <a href="http://jsfiddle.net/QWB4J/1/" rel="nofollow">http://jsfiddle.net/QWB4J/1/</a></p>

<p>I tried using <code>.replaceWith</code> but it only works when expanding and not collapsing.</p>

<p>Any help it's greatly appreciated.</p>

<p><strong>EDIT-</strong></p>

<p>Here's a fiddle with the solution: <a href="http://jsfiddle.net/QWB4J/24/" rel="nofollow">http://jsfiddle.net/QWB4J/24/</a></p>

<p>Solution provided by <strong>willw</strong>.</p>
