StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Are you trying to do this?</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> </head> <body> <div id="wrapper"> <div id="container"> </div> <a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a> </div> </body> </html> </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>

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