Question

I have home.html which has the following div

<div id="feature" class="feature">
</div>

I have n-numbered different buttons displayed as

         <button id="search" class="btn btn-large navigator-button navigator-icons">
                <i class="icon-search icon-large"></i>
                search
            </button>
          </li>
          <li>
            <button id="playlist" class="btn btn-large navigator-button navigator-icons">
                <i class="icon-list icon-large"></i>
                playlists
            </button>
          </li>
          <li>
            <button id="settings" class="btn btn-large navigator-button navigator-icons">
                <i class="icon-cog icon-large"></i>
                settings
            </button>
          </li>
          <li>
              <button id="queue" class="btn btn-large navigator-button navigator-icons">
                  <i class="icon-cog icon-play-circle"></i>
                  queue
              </button>

When I click on any buttons, the content associated to that click is displayed in <div id="feature" class="feature">

But currently, I just do the jQuery.load() and wipe out anything existing under <div id="feature">

Disadvantage?

• I have build those pages every time
• I do not retain the state of earlier page, for example, the search results user searched for

What I want?

• I need a way so that based on the click of the page, the page associated to current click loads while hiding the other pages corresponding to other button clicks

• I am not sure how to do that with jQuery, I am very new to it

Please let me know what best I can do to achieve the above
Thank you in advance

Answer 1

A possible solution is to use the hide() and show() functions, they don’t modify the DOM.

http://api.jquery.com/show/

http://api.jquery.com/hide/

e.g.

$('#feature .content1').hide();
$('#feature .content2').show();