CODEWITHSUNDEEP
javascriptjquerytabsshow-hide
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

Making tab and showing/hiding tab-esque content in jQuery

So tab may not be the right word to use in my scenario, but here is the situation (and I don't want to use jQuery-UI library too). I think it can be done more simply.

Nav markup in the header:

<ul>
  <li><a class="active" href="#" title="">Uno</a></li>
  <li><a href="#" title="">Dos</a></li>
  <li><a href="#" title="">Tres</a></li>
  <li><a href="#" title="">Cuatro</a></li>
</ul>

Body markup for the content (they are not contained in the same div, nor can they be):

  <div class="block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block">
    <p>Lorem ipsum</p>
  </div>

I'm trying to do two things. 1.) Hide everything except the first block of content (which corresponds with the first list item, hence .active, on load. 2.) On click of any of the list items it hides all the other blocks of content and shows the appropriate one, while adding an .active class to it in the nav.

Would really appreciate the help.

Upvotes: 0

Views: 240

Answers (1)

teacher
teacher

Reputation: 1015

Navigation links....

<div class="sidebar left">
                <ul id="navigation">
                    <li class="active" ><a href="#"  >Basic Information</a></li>
                    <li class="inactive"><a href="#" >Profile Picture</a></li>
                    <li class="inactive"><a href="#" >Education And Work</a></li>
                    <li class="inactive"><a href="#" >Social Contact</a></li>
                    <li class="inactive"><a href="#" >Security</a></li>
                </ul>
     </div>

Code for you sections....

<div class="sec">
Section1
</div>
<div class="sec">
Section2
</div>
<div class="sec">
Section3
</div>
<div class="sec">
Section4
</div>

your jquery code for above html could be like this...

 <script type='text/javascript'>
        $(document).ready(function() {      

        $('ul#navigation li').click(function(){
            var number = $(this).index();
            $('.sec').hide().eq(number).show();
            $(this).toggleClass('active inactive');
            $('ul#navigation li').not(this).removeClass('active').addClass('inactive');
        });

        $('.sec').not(':first').hide();

        });
    </script>

try this... it will work... let me know...

Upvotes: 1

Related Questions