Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Are you trying to do this?</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="container"&gt; &lt;/div&gt;&lt;!-- end of #container div --&gt; &lt;a id="showdiv"&gt;Show the div&lt;/a&gt;|&lt;a id="hideDiv"&gt;Hide the div&lt;/a&gt;|&lt;a id="toggle"&gt;Toggle&lt;/a&gt; &lt;/div&gt;&lt;!-- end of #wrapper div --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here's the css:</p> <pre><code>#container { width: 300px; height: 300px; background: red; margin-bottom: 20px; } #wrapper { margin: 40px auto; width: 400px; } </code></pre> <p>And here's the jquery</p> <pre><code>$(function() {// When document is ready, run this... //Get hold of the link with the id #showdiv and do something when you click it $("#showdiv").click(function() { // Grab the div with the id #container and show it // Alert me when you're done $("#container").show(2000, function() { alert("I'm done showing"); }); }); //Get hold of the link with the id #hideDiv and do something when you click it $("#hideDiv").click(function() { // Grab the div with the id #container and hide it // Alert me when you're done $("#container").hide(2000, function() { alert("I'm done hiding"); }); }); // Toggle - This is like a On/Off Switch //Get hold of the link with the id #toggle and do something when you click it $("#toggle").click(function() { // Grab the div with the id #container and show if hidden / hide if shown $("#container").toggle(2000); }); }); </code></pre> <p>Of course you'd have to link to a copy of jQuery before using the script above. Here's a link to a demo: <a href="http://jsfiddle.net/tonystark/HhNBA/" rel="nofollow">http://jsfiddle.net/tonystark/HhNBA/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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