CODEWITHSUNDEEP
javascriptjquery
shanto
shanto

Reputation: 125

toggle div display style not work

I want that when load my page first time then <div class="col-md-9 column" id="c9" > will be active but then i click toggle button then class="col-md-9 column" id="c9" goes to hide and
<div class="col-md-12 column" id="c12" will be show. my toggle code work but when i add this code 

if ($('#c9').is(':visible')) {
    $('#c12').hide();
}  
   if ($('#c9').is(':hidden')) {
    $('#c12').show();
}

then both of these div not show

<div class="col-md-3 column" id="area_toggle">

</div>

<div class="col-md-9 column" id="c9" >
    <div class="col-md-12 column" id="c12" style="display: none">

    </div>
</div>

<script>
$( "#menu-toggle" ).click(function() {
  $( "#area_toggle" ).toggle( "slow" )
  $( "#sidebar" ).toggle( "slow" );
          if ($('#c9').is(':visible')) {
            $('#c12').hide();
        }  
           if ($('#c9').is(':hidden')) {
            $('#c12').show();
        }                  

});
</script>

Upvotes: 0

Views: 76

Answers (3)

Macchiato
Macchiato

Reputation: 815

Your requirement based from the code is a paradox, if i understand correctly you want to show #c9 and hide #c12, then once #area_toggle is clicked show #c12 and hide #c9? This is impossible since c12 is a child of c9 , this means that when #c9 is hidden, #c12 is also hidden.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can just use toggle() to toggle the visibility of both the elements instead of using if...else

$("#menu-toggle").click(function () {
    $("#area_toggle").toggle("slow")
    $("#sidebar").toggle("slow");
    $('#c9, #c12').toggle();
});

Upvotes: 0

Goran.it
Goran.it

Reputation: 6299

You are using c9 for comparison, but that element is not toggled, you should use something like this instead:

<div class="col-md-3 column" id="area_toggle">

</div>

<div class="col-md-9 column" id="c9" >
    <div class="col-md-12 column" id="c12" style="display: none">

    </div>
</div>

<script>
$( "#menu-toggle" ).click(function() {
  $( "#area_toggle" ).toggle( "slow" );
  $( "#sidebar" ).toggle( "slow" );
          if ($('#c12').is(':visible')) {
            $('#c12').hide();
        }  else {
            $('#c12').show();
        }                  

});
</script>

Upvotes: 0

Related Questions