Question

I’m trying to do the following:

• I have 6 div. Inside each div is another div with display:none.

I want to do in jQuery when i click on each div all 6 div change to display:none and the div inside the div clicked to show in the screen.

Check this fiddle http://jsfiddle.net/Weinz/xaMfk/2/

The only thing that happen it’s all goes display:none

What can i do? I try also with show and hide and doesn’t work

Thank you in advance

Answer 1

Glad you got your answer above. @Zoltan’s approach looks like it could work for you. I would also consider maybe adding classes to the divs as it would reduce the jquery and css.

<div class="outerDiv" id="box1">Box1</div>
<div id="cont1" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box2">Box2</div>
<div id="cont2" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box3">Box3</div>
<div id="cont3" class="innerDiv" style="display:none"><p>Some text and img</p></div>    
<div class="outerDiv" id="box4">Box4</div>
<div id="cont4" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box5">Box5</div>
<div id="cont5" class="innerDiv" style="display:none"><p>Some text and img</p></div>



$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
});​
.outerDiv{border: 1px solid;}​ 
div,div p {display:inline;}