CODEWITHSUNDEEP
jquery
calvin12
calvin12

Reputation: 211

linking various divs for clicking functions using Jquery

I have 3 sections. Group, Category, Subcategory.

There are 2 groups: grp1, grp2 For grp1, there are 3 category: grp1_C1, grp1_C2, grp1_C3 For grp 2, there are 2 category: grp2_C1, grp2_C2

For grp1_C1, there are 3 subgcategory: grp1_C1_S1, grp1_C1_S2 and so on

All the sections will be fetched dynamically from the data and thus the linking etc has to be done using jquery.

What I want to do is that I show 2 group buttons. When I Click on any of the groups, I want to show the Categories linked to it, and then when I click any of the category in it, I want to show the subsequent sub-categories in it.

I will create divs for all. 

<div id='group'>
    <div id='grp1' class="group"></div>
    <div id='grp2' class="group"></div>
</div>


<div id='cat'>
    <div id='grp1_cat' class="cat">
       <div id='grp1_cat1' class="cat"></div>
       <div id='grp1_cat2' class="cat"></div>
    </div>
    <div id='grp2_cat' class="cat">
       <div id='grp2_cat1' class="cat"></div>
       <div id='grp2_cat2' class="cat"></div>
    </div>
</div>

similarly for sub-categories.

Now, when I click on group1, I want only group 1 categories visible, and then when I click a category only the linked sub-category visible.

Please help.

Upvotes: 0

Views: 65

Answers (2)

Anujith
Anujith

Reputation: 9370

See this : Fiddle

$('#cat > .cat:not(:first)').hide();
$('#group').on('click', '.group', function(){
   $('#cat > .cat').hide();
   $('#' + this.id + '_cat').show();
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can try something like

$('#cat > .cat').hide();
$('#group').on('click', '.group', function(){
    $('#cat > .cat').hide();
    $('#' + $(this).attr('id') + '_cat').show();
});

Demo: Fiddle

Upvotes: 0

Related Questions