StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Alt 1: Use jquery tabs:</strong> See demo and code here: <a href="http://jqueryui.com/demos/tabs/" rel="noreferrer">http://jqueryui.com/demos/tabs/</a></p> <p><strong>Alt 2: Hide/show div in same html file:</strong></p> <p>HTML:</p> <pre><code><div id="nav"> <a href="#content1">Show content 1</a> <a href="#content2">Show content 2</a> <a href="#content3">Show content 3</a> </div> <div id="content1" class="toggle" style="display:none">show the stuff1</div> <div id="content2" class="toggle" style="display:none">show the stuff2</div> <div id="content3" class="toggle" style="display:none">show the stuff3</div> </code></pre> <p>jQuery:</p> <pre><code>$("#nav a").click(function(e){ e.preventDefault(); $(".toggle").hide(); var toShow = $(this).attr('href'); $(toShow).show(); }); </code></pre> <p>Demo: <a href="http://jsfiddle.net/5NEu3/3/" rel="noreferrer">http://jsfiddle.net/5NEu3/3/</a></p> <p><strong>Alt 3: Load from server ondemand:</strong></p> <p>To load html into your main div you should use: <a href="http://api.jquery.com/load/" rel="noreferrer">http://api.jquery.com/load/</a> Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.</p> <p>Html</p> <pre><code><a href="http:www.test.com/test1.html">Show content 1</a> <a href="http:www.test.com/test2.html">Show content 2</a> </code></pre> <p>jQuery</p> <pre><code>$("#nav a").click(function(e){ e.preventDefault(); $('#maindiv').load($(this).attr("href")); }); </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