Question

I am trying to create a menu(no dropdown) using jquery. Please check some of my codes below.

If I click on the link of Galaxy Tab I want to display the div where the value of class attribute is galaxyTab. Similarly if I click on the link of Iphone, I want to hide the previous div(galaxyTab) and display the div where the value of class attribute is iphone. Here’s the fiddle of the following code

<div id="productMenu">
  <a href="galaxyTab" class="showproducts">Galaxy Tab</a>
  <a href="iphone" class="showproducts">Iphone</a>
  <a href="hpslate" class="showproducts">HP Slate</a>
</div>
 Unlimited... like this

<div id="article">
<div id="products" class="galaxyTab" style="">Galaxy Tab</div>
<div id="products" class="iphone" style="display:none">Iphone</div>
<div id="products" class="hpslate" style="display:none">HPslate</div>
</div>

I can achieve the above requirement by following code, but the problem is I have to fetch the menu names and other information from database and there will probably be around 15 menu items, so the following method is not feasible. Could you please show me an easy way to do this.

Thanks in advance 🙂

$('a.showproducts').click(function(){
        var a_href = '.'+ $(this).attr('href'); 
                    $('.galaxyTab').hide();
                     $('.iphone').hide();
                     $('.hpslate').hide();

                    $(a_href).show();

       return false
    });//.click function ends here

Answer 1

There are several prebuilt solutions that will help you achieve this. Depending on how you want it to work, there is:

Accordion:

http://jqueryui.com/demos/accordion/

Tabs:

http://jqueryui.com/demos/tabs/

Also – a note for your HTML. You shouldnt be using the same ID for multiple entries – as ID are meant to be unique.

If you put in another class on each div, you could also write this code to manually hide the divs if you dont want to put in a big component like accordion or tabs.

http://jsfiddle.net/Sqgbb/

$('a.showproducts').click(function(e){
    e.preventDefault();
    var a_href = '.'+ $(this).attr('href');
    $('.products').hide();
    $(a_href).show();
});