jQuery .css display：none

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;}

Answer 2

<div id="box1" class="outer">Box1<div id="cont1" class="inner" style="display:none"><p>Some text and img</p></div></div>
<div id="box2" class="outer">Box2<div id="cont2" class="inner" style="display:none"><p>Some text and img</p></div></div>
<div id="box3" class="outer">Box3<div id="cont3" class="inner" style="display:none"><p>Some text and img</p></div></div>

---

$(function(){
    $(".outer").click(function(){  
        var id= this.id;
        $("#"+id+" .inner").show(); 
//user toggle instead of show if you need toggle

   });

});

This code will hep you, if you are intened to show each hidden div when a user clicks parent div. If you hide parent div, then the inner content will also be hidden.

Answer 3

Try this demo

As I understand your question this is what you need.

JS

$(function(){
   $("#wrapper").on('click', 'div.maindiv',function(){
       $(this).find('div.innerdiv').show();
       $(this).siblings('div.maindiv').hide();

   });
});

This will show whatever the inner div content of the div you clicked and will hide the other divs on the same element level. Don't forget to try the demo out and give the feedback.( link is given at the beginning of the answer )

Hope this will solve your problem. If you have any questions please don't hesitate to ask. Thanks.

Answer 4

try something like this, jsfiddle :

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

// CSS:
div {
    display:inline;
}
#box1 {border: 1px solid;}
#box2 {border: 1px solid;}
#box3 {border: 1px solid;}
#box4 {border: 1px solid;}
#box5 {border: 1px solid;}

// JS:
$(function(){
   $("#box1").click(function(){
       $(this).css("display","");
       //$("#box1").css("display","none");
       $("#box2").css("display","none");
       $("#box3").css("display","none");
       $("#box4").css("display","none");
       $("#box5").css("display","none");
   });
});