Question

Im creating a NAVIGATION, it has 3 states. Normal, Rollover and Selected.

And each button has different images for all 3 states.

I want to do this with jQuery.

State 1 & 2 I can show with seperate class for

.boy1 a {background-image:...}
.boy1 a:hover {background-image:...}
.boy2 a {background-image:...}
.boy2 a:hover {background-image:...}
.boy3 a {background-image:...}
.boy3 a:hover {background-image:...}

But when you click on BUTTON, it should show a DIV that contains its NAME or any other image.

e.g.

$(".boy1").click(function() {
  $("#boy1").show("slow");
});

But now my problem is, if someone clicks on other buttons earlier #boy1 DIV should hide and if you click .boy2 then #boy2 show show and other #boy1 or #boy3 should hide

HTML PART:

<div id="navigation">
    <div class="boy1"><a href="#section1"></a></div>
    <div id="boy1">MR ABC</div>

    <div class="boy2"><a href="#section2"></a></div>
    <div id="boy2">MR XYZ</div>

    <div class="boy3"><a href="#section3"></a></div>
    <div id="boy3">MR LALOLA</div>
</div>

<style type="text/css">
    .boy1 a { background-image:images/boy1.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy1 a:hover { background-image:images/boyimage1.gif;}
    #boy1 {position:absolute; top:100; left:50; height:30px; width:60px;}

    .boy2 a { background-image:images/boy2.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy2 a:hover { background-image:images/boyimage2.gif;}
    #boy2 {position:absolute; top:100; left:200; height:30px; width:60px;}

    .boy3 a { background-image:images/boy3.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy3 a:hover { background-image:images/boyimage3.gif;}
    #boy3 {position:absolute; top:100; left:350; height:30px; width:60px;}
</style>

Answer 1

HTML

<div id="navigation">
    <div class="boy1"><a href="#section1">x</a></div>
    <div id="boy1" class="showhidediv">MR ABC</div>

    <div class="boy2"><a href="#section2">y</a></div>
    <div id="boy2" class="showhidediv">MR XYZ</div>

    <div class="boy3"><a href="#section3">z</a></div>
    <div id="boy3" class="showhidediv">MR LALOLA</div>
</div>​

JS

$(document).ready(function() {

  $('div.boy1').on('click',function(){
    $('div#boy1').siblings('.showhidediv').hide();
    $('div#boy1').show();
});

  $('div.boy2').on('click',function(){
    $('div#boy2').siblings('.showhidediv').hide();
    $('div#boy2').show();
});

   $('div.boy3').on('click',function(){
    $('div#boy3').siblings('.showhidediv').hide();
    $('div#boy3').show();
});

});

​check the demo here

add $('.showhidediv').hide(); to your code if you want to start by hiding all the divs.

I hope this will solve your problem. If you have any questions please don’t hesitate to ask. Thanks