Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>&lt;div id="nav"&gt; &lt;a href="#content1"&gt;Show content 1&lt;/a&gt; &lt;a href="#content2"&gt;Show content 2&lt;/a&gt; &lt;a href="#content3"&gt;Show content 3&lt;/a&gt; &lt;/div&gt; &lt;div id="content1" class="toggle" style="display:none"&gt;show the stuff1&lt;/div&gt; &lt;div id="content2" class="toggle" style="display:none"&gt;show the stuff2&lt;/div&gt; &lt;div id="content3" class="toggle" style="display:none"&gt;show the stuff3&lt;/div&gt; </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>&lt;a href="http:www.test.com/test1.html"&gt;Show content 1&lt;/a&gt; &lt;a href="http:www.test.com/test2.html"&gt;Show content 2&lt;/a&gt; </code></pre> <p>jQuery</p> <pre><code>$("#nav a").click(function(e){ e.preventDefault(); $('#maindiv').load($(this).attr("href")); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    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.
    3. VO
      singulars
      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