CODEWITHSUNDEEP
jquery
viktor
viktor

Reputation: 1048

Show and hide several divs when clicking on links

So the situation is like this:

I have several links, each with one hidden div that needs to be shown when the user clicks the specific link. Of course the already visible div from another link need to be hidden in the same operation. All of the divs are hidden by default. I was thinking that the simplest way is to assign an id active to the child div of the link clicked and then show() #active, afterwards at every click on another div I would hide the #active id, assign it again to another div and then show the id. Is it possible and how would the code look like? Yes I am a Jquery newbie. The html code looks like:

<div class="nav">
    <ul>
        <li><a href="#" title="show phone #(403) 454-5526">Call us</a>
            <div class="navLinks"> (403) 454-5526 </div>
        </li>
        <li><a href="#">Visit our website</a>
               <div class="navLinks"> Content Here </div>
        </li>
        <li><a href="#"Email us</a>
               <div class="navLinks"> Content Here </div>
        </li>
        <li><a href="#">Send to a friend</a>
               <div class="navLinks"> Content Here </div>
        </li>
    </ul>
</div>

Upvotes: 0

Views: 1693

Answers (4)

Christian Tjhai
Christian Tjhai

Reputation: 111

I have pasted here, try it for yourself: http://jsfiddle.net/Y97F8/

Here is the code that does it:

jQuery(function(){

   //hide all first
   jQuery(".navLinks").hide(); //hide others

   jQuery(".nav ul li a").each(function(i) {
      jQuery(".nav ul li a").eq(i).click(function() {
         jQuery(".navLinks").hide(); //hide others
         jQuery(".nav ul li a").eq(i).next().show(); //show the div at the specified index
      });
   });

});​

Upvotes: 1

Adil
Adil

Reputation: 148110

Try this, Demo

$('.nav li a').click(function (){     
  $('.navLinks').css('display', 'none');
  $(this).next().css('display', 'block');
});​

Upvotes: 1

VisioN
VisioN

Reputation: 145388

How about something like that?

$(".nav a").on("click", function(e) {
    var div = $(this).siblings(".navLinks").toggle();
    $(".navLinks").not(div).hide();
    e.preventDefault();
});​

DEMO: http://jsfiddle.net/4ncew/1/

Upvotes: 1

johnmadrak
johnmadrak

Reputation: 825

This should do what you need:

​$​(document).ready(function(){
    $('.nav ul li a').click(function(){
        $('.navLinks').css('display','none');
        $(this).siblings('.navLinks').css('display','block');   
    });    
});​​​​

Here is a jsfiddle for you to test it: http://jsfiddle.net/2H4zD/3/

Upvotes: 1

Related Questions