How can I show content following a read-more link using jQuery?
<p>I have a 'read more' link within a div. I would like the content after that link to be hidden on page load and displayed when the link is clicked. I would also like the link to either disappear, or change to 'less'.</p>

<p>The html is as follows:</p>

<pre><code>&lt;div class="widget-box"&gt;
//Text to be shown on page load
&lt;a id="toggle"&gt;read more&lt;/a&gt;
//Text to be toggled
&lt;/div&gt;
</code></pre>

<ul>
<li>The content of the widget-box div is created using a WordPress text
widget.</li>
<li>I want to do this without adding extra html (divs and spans).</li>
<li>The client needs control over where to place the #toggle link. </li>
</ul>

<p>Thanks for your help.</p>

<p>Keith</p>
