How to preload html links from a menu and hide / show the content with javascript?

Question

I have an html menu with links to other pages which have this menu included too. Very basic:

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class="active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a href="index.html">
                <i class="icon-dashboard"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="1.html">
                <i class="icon-signal"></i>
                <span>1</span>
            </a>
        </li>
        <li>
            <a href="2.html">
                <i class="icon-picture"></i>
                <span>2</span>
            </a>
        </li>
        <li>
            <a href="3.html">
                <i class="icon-calendar-empty"></i>
                <span>3</span>
            </a>
        </li>
    </ul>
</div>

So basically this menu helps navigate through content.

When I load the home of the menu I want a function to automatically load the other links too so it speeds up the navigation and of course I want the content of those links to show up only when the corresponding link in the menu is clicked.

What library / function should I look into to achieve that?

I not sure how large your site is, but loading multiple sites at once can slow down the site pretty much. I don't know much about preloading, but loading other pages (on demand!) could be done with `ajax`. Where as loading multiple pages at once and displaying different sites could be done similar to what `jQuery mobile` did with it's `page` elements. - I'll report back if I find such a framework which does the work for you in this way. — Smamatti, Oct 23 '13 at 08:22
@AlexanderKosubek indeed it is a kind of cache. I guess it is not the cleanest way to do it but right now I can't join all the html together in one page because of dynamic content. I will solve this in a later stage. I guess this would be close to what bootstrap does with tabs. — Bastian, Oct 23 '13 at 08:26
@Smamatti well these pages a pretty small and I can control the size, as said earlier this is a first stage. — Bastian, Oct 23 '13 at 08:28

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-10-23T08:42:44.153

Which Library or Function to use

You can see, in my code everything is jQuery. So in my advice, jQuery will be the best for you! You can have it here:

api.jquery.com or even at their site www.jquery.com You can have a quick link at their footer tag.

Pages will be cached

Your page and some of its code is saved as a cache in the local storage, you can check them out using F12. Which will open Developer Tools, then in Network workspace, check out which are loaded from Server and which are loaded from local storage. Almost every browser will save some of your code, from .css files or your scripts so that it doesn't have to load it everytime. You can see the code 304 (correct me, if mistaken) in browser which would mean that the file was loaded from local machine. So don't worry about this. You can get other helpfull articles about speeding up and caching the sessions too.

Dynamically Creating the menu

To dynamically create the link navigation menu you can use:

Example

$('#dashboard-menu').html();

In the HTML of the code, you can write the list items. Which will be set so that you get them. You can call this function on page start as:

Code Example

$(document).ready(function () {
  $('#dashboard-menu').html();
}

Techniques

If you don't know what would be the menu, for example you want to load the data from Database, you can use ajax requests too, this way you will write the result in the dashboard-menu. However, your site won't get fast just by removing the navigation menu and laoding it after the page load.

For example:

$.ajax({
  url: "page_to_load.html"
  success: function (data) {
    $('#dashboard-menu').html(data);
  }
});

Alternate way of using Ajax

Alternate way for this is load().

http://api.jquery.com/load/

To show only relative menu

To show the content you can use show(). Like this, lets take the example from your code

Snippet from your code

<li>
   <a href="1.html">
     <i class="icon-signal"></i>
       <span>1</span>
   </a>
</li>

Showing child

To show the a from this; since a is a child of li, you can use this:

$('li').click(function () {
  $(this).find('a').show(); // or even use toggle()
}