Databases
StackOverflow2013
Postsdbo
POjQuery toggle div and text
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery toggle div and text
    text
    copied!<p>I would like some help with this code, I have read similar questions &amp; answers here on stackoverflow but I still can't get it right.</p> <p>I have a link that populated by .html("") to read <code>more…</code></p> <p>when clicked it opens the hidden div and at the end the .html("") reads <code>less...</code></p> <p>When I click close, the div slides closed but the text still reads <code>less...</code></p> <p>I have read many articles on how to do this but am confused and can't get past this last hurdle, any help would be much appreciated.</p> <p>// this is the intro div </p> <pre><code>&lt;div id="" class=""&gt; &lt;p&gt; Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas ligula nostra, accumsan taciti. &lt;/p&gt; &lt;/div&gt; </code></pre> <p>// this next div is hidden</p> <pre><code>&lt;div class="overview-continued"&gt; &lt;p&gt; Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas ligula nostra, accumsan taciti. &lt;/p&gt; &lt;/div&gt; &lt;a class="show-overview" href="#"&gt;&lt;h4&gt;&lt;/h4&gt;&lt;/a&gt; $(document).ready(function() { $(".overview-continued").hide(); $(".show-overview").html("more..."); $(".show-overview").click(function() { $(".overview-continued").slideToggle("1000"); $(".show-overview").html("less..."); return false; }); });​ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload