Showing and Hiding many divs on click using jquery

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

You need to switch the id's and classes on the articles. Id's should be unique values. — Jeemusu, Aug 02 '12 at 05:42

Kieran Andrews · Accepted Answer · 2012-08-02T05:47:30.280

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();
});

score 1 · Answer 2 · edited Aug 02 '12 at 05:43

1

This could be more feasible:

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

But should be class="product", id are unique.

edited Aug 02 '12 at 05:43

Alexander

23,432
11
63
73

answered Aug 02 '12 at 05:41

Alex Ball

4,404
2
17
23

score 1 · Answer 3 · answered Aug 02 '12 at 05:44

Try this code:

$('a.showproducts').click(function(){
        var a_href = '.'+ $(this).attr('href');
                     $('#article>div').hide();
                                         $(a_href).show();

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

This will hide all divs no matter which one was shown before and then show just the one div you want.

Updated fiddle- http://jsfiddle.net/Wvjbr/4/

score 0 · Answer 4 · edited May 23 '17 at 12:03

0

would write this in this way:

$('a').click(function(event) {
    $('.showproducts').hide();
    $(event.target).show();
})

btw.:

you have more than one id with name "products", this is not possible
see here: https://stackoverflow.com/a/192066/1067061

Hope it helps.

edited May 23 '17 at 12:03

Community

1
1

answered Aug 02 '12 at 05:44

Moszeed

1,037
1
10
20

Showing and Hiding many divs on click using jquery

4 Answers4