StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Two main things are wrong with your code:</p> <ul> <li>You do not hook your jQuery code to the "document ready" event. Not doing this will (potentially) cause it to run before the document is fully loaded, which is undesirable most of the time.</li> <li>You're using <code>onclick</code> inline JavaScript. Don't do that. That's not the way JavaScript/HTML integration is written anymore. jQuery has event handlers to catch click events for you. Always keep HTML and JavaScript 100% separate.</li> </ul> <p>CSS:</p> <pre><code>.hidden { display: none; } </code></pre> <p>HTML</p> <pre><code><p><a class="reveal" href="#hidden3">Edit</a></p> <div id="hidden3" class="hidden step"> </code></pre> <p>JavaScript</p> <pre><code>// $() is short for $(document).ready() $(function () { // hide all the steps on document load $("div.step").addClass("hidden"); // show the one step that is identified by the current hash (if any) $(document.location.hash).removeClass("hidden"); $("a.reveal").click(function (event) { var idToReveal = $(this).attr("href"); // store the ID to show in the URL for bookmarking document.location.hash = idToReveal; // hide every step that is currently visible $("div.step").not(".hidden").addClass("hidden"); // reveal the next div (as identified by the current link's href) $(idToReveal).removeClass("hidden"); // prevent the default click behavior (i.e. prevent navigation) event.preventDefault(); }); }); </code></pre> <p>The above makes use of the fact that the <code>document.location.hash</code>, a page-internal <code><a href></code> and <a href="http://api.jquery.com/id-selector/" rel="nofollow">jQuery's ID selector</a> all use the same syntax. </p> <p>As long as you just want to transport a single bit of information in the hash, this is all you need.</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