Hide/reveal content in a div using js and css

Question

I want to reveal content in a div by clicking on another div of an image. I have the basic idea working, but when i put content into the div it isn't hidden when the div is closed.

I put a <ul> in and the <ul> is always showing even when the div is hidden.

 $(document).ready(function () { $('#header').click(function () { $('#content').removeClass('hidden'); $('#content').addClass('visible'); }); $('#content').on('mouseleave', function (e) { setTimeout(function () { $('#content').removeClass('visible').addClass('hidden'); }, 600); }); }); 

 .hidden{ max-height: 0px; } .visible{ max-height: 500px; } #content{ width:200px; height:200px; background:teal; -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s; } #header{ width:10px; height:10px; background:darkred; margin:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"></div> <div id="content"> <ul> <li>some text</li> <li>some text</li> </ul> </div> 

Answer 1

It's because your <ul> is overflowing <div> height. Add overflow: hidden to #content

 $(document).ready(function () { $('#header').click(function () { $('#content').removeClass('hidden'); $('#content').addClass('visible'); }); $('#content').on('mouseleave', function (e) { setTimeout(function () { $('#content').removeClass('visible').addClass('hidden'); }, 600); }); }); 

 .hidden{ max-height: 0px; } .visible{ max-height: 500px; } #content{ width:200px; height:200px; background:teal; -webkit-transition: max-height 0.8s; -moz-transition: max-height 0.8s; transition: max-height 0.8s; overflow: hidden; } #header{ width:10px; height:10px; background:darkred; margin:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"></div> <div id="content"> <ul> <li>some text</li> <li>some text</li> </ul> </div> 

Answer 2

Add hidden class on #content div and set property overflow:hidden;

---

    .hidden{
    max-height: 0px;
    }
     .visible{
    max-height: 500px;  
    }

    #content{
    width:200px;
    height:200px;
    background:teal;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
     transition: max-height 0.8s;
     overflow:hidden;

     }

     #header{
    width:10px;
    height:10px;
    background:darkred;
    margin:10px;
    }

---

$(document).ready(function() {
  $('#header').click(function() {

    $('#content').removeClass('hidden');
    $('#content').addClass('visible');
  });
  $('#content').on('mouseleave', function(e) {
    setTimeout(function() {
      $('#content').removeClass('visible').addClass('hidden');
    }, 600);
  });
});

---

 <div id="header">
    </div>
<div id="content" class="hidden">
  <ul>
    <li>some text</li>
    <li>some text</li>
  </ul>
</div>

Answer 3

Maybe try jquery?

Here is a jquery way in JSFiddle. But I'll post a javascript solution in a while

https://jsfiddle.net/fyws9zye/13/

$( "#Hideme" ).click(function() {
  $('#package').hide();
});

$( "#showme" ).click(function() {
  $('#package').show();
});

Answer 4

$(document).ready(function () {
$('#header').click(function () {
$('#content').removeClass('hidden');
$('#content').addClass('visible');
$('#Hej').show();
 });
  $('#content').on('mouseleave', function (e) {
  setTimeout(function () {
  $('#content').removeClass('visible').addClass('hidden');
    $('#Hej').hide();
  }, 600);
 });
});