CODEWITHSUNDEEP
jqueryhtmlcss
Sowmya
Sowmya

Reputation: 26969

Show divs on click

I have to show respective dis on click function. Just like accordion/Content tabs in jquery.

Currently I have written jquery for add and remove the class.

I need to show the respective divs on clicking tabs.

Here is my code 

$('li').on('click',function(){
      $('li a').removeClass('inactive');
      $(this).children('a').addClass('inactive');
    });

DEMO

P.S - I dont want to give toggle effect on tab menus. And no plugins please.

Upvotes: 0

Views: 187

Answers (2)

Satpal
Satpal

Reputation: 133403

You can use .data() to store which div to display when anchor is clicked.

HTML

<ul>
  <li class="table-view"><a href="#" class="inactive" data-div-class="div1">Div 1</a></li>
  <li class="chart-view"><a href="#" data-div-class="div2">Div 2</a></li>
</ul>  

<div class="myDiv div1">Show this by default and remove when clicked on the div 2 tab</div>
<div class="myDiv div2">Show this when Div 2 tab is clicked</div>

JavaScript

$('li').on('click',function(){
    $('li a').removeClass('inactive');

    var $anchor = $(this).children('a');
    $anchor.addClass('inactive');

    //Hide All Divs
    $('.myDiv').hide();

    //Show Div associated with $anchor
    $("." + $anchor.data('div-class')).show();     
});

DEMO

Upvotes: 1

Suleman Ahmad
Suleman Ahmad

Reputation: 2103

Try this:-

('li').on('click',function(){
  $('li a').removeClass('inactive');
  $('li a').show(); 
  $(this).children('a').addClass('inactive');
  $(this).children('a').hide();
});

Upvotes: 0

Related Questions