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

Tip: You can't hide a parent element without hiding the child. — Ricardo Souza
– Ricardo Souza, Commented Sep 27, 2012 at 17:08
when you hide the parent, the child will automatically be hidden aswel. — Nicholas
– Nicholas, Commented Sep 27, 2012 at 17:10

hardba11 · Accepted Answer · 2012-09-27 17:51:23Z

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

edited Sep 27, 2012 at 17:51

answered Sep 27, 2012 at 17:19

hardba11

1,51615 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Weinz Over a year ago

My mistake but i only want to show the div id="cont1" if i click box1 and so on with next boxes. Your code show me every "cont" div

hardba11 Over a year ago

did you end up using this or just keeping what you had?

Weinz Over a year ago

I did end up using your fiddle but with new additions check it out jsfiddle.net/Weinz/jdFRw/4

hardba11 Over a year ago

A lot less code eh? looks good...glad it's working for you. Much appreciate if you could mark this as the answer

balanv · Accepted Answer · 2012-09-27 17:39:33Z

1

<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.

edited Sep 27, 2012 at 17:39

answered Sep 27, 2012 at 17:33

balanv

10.9k29 gold badges95 silver badges137 bronze badges

Comments

Techie · Accepted Answer · 2012-09-27 18:21:50Z

1

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.

edited Sep 27, 2012 at 18:21

answered Sep 27, 2012 at 17:38

Techie

45.2k45 gold badges164 silver badges248 bronze badges

2 Comments

Weinz Over a year ago

I need to hide also the "box1" when i click on it. When i click a box i want to hide all "boxes" and show it's child div. But you guys told me if the parent is hide the child is hidden too

Techie Over a year ago

yes it is. It is not possible to show the child div if we are to hide the parent div. Parent div must be shown

Jude Fisher · Accepted Answer · 2012-11-14 14:14:51Z

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

Collectives™ on Stack Overflow

jQuery .css display:none

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related