javascript - Toggle Menu with animation -

i have toggle menu animation on category menu. idea when user click on toggler item, content pushed down, , menu appears. when clicked again, content normal place, , menu disappears.

i think i'm on right way that, but, if don't use property display:none , display: block, there blank spot (where menu is). and, transition don't work...

here link problem: http://alsite.com.br/festas/azul/categoria.asp

basic html:

<section id="menu_categorias"> <div class="category_bar">     <div class="container">          <div class="row">              <div class="col-md-5">                 <div class="menu_categorias">                     <a href="#menu" id="toggle"><span></span></a>                  </div>             </div>          </div>      </div> </div>  <div id="menu">     <div class="container">         <div class="col-md-3 col_menu">             <ul>                 <li>                     <a href="#">categoria teste</a>                     <ul class="submenu">                         <li><a href="">teste teste teste</a></li>                         <li><a href="">teste teste teste</a></li>                         <li><a href="">teste teste teste</a></li>                         <li><a href="">teste teste teste</a></li>                         <li><a href="">teste teste teste</a></li>                     </ul>                 </li>             </ul>         </div>      </div> </div> 

script:

var thetoggle = document.getelementbyid('toggle');              // based on todd motto functions             // http://toddmotto.com/labs/reusable-js/              // hasclass             function hasclass(elem, classname) {                 return new regexp(' ' + classname + ' ').test(' ' + elem.classname + ' ');             }             // addclass             function addclass(elem, classname) {                 if (!hasclass(elem, classname)) {                     elem.classname += ' ' + classname;                 }             }             // removeclass             function removeclass(elem, classname) {                 var newclass = ' ' + elem.classname.replace( /[\t\r\n]/g, ' ') + ' ';                 if (hasclass(elem, classname)) {                     while (newclass.indexof(' ' + classname + ' ') >= 0 ) {                         newclass = newclass.replace(' ' + classname + ' ', ' ');                     }                     elem.classname = newclass.replace(/^\s+|\s+$/g, '');                 }             }             // toggleclass             function toggleclass(elem, classname) {                 var newclass = ' ' + elem.classname.replace( /[\t\r\n]/g, " " ) + ' ';                 if (hasclass(elem, classname)) {                     while (newclass.indexof(" " + classname + " ") >= 0 ) {                         newclass = newclass.replace( " " + classname + " " , " " );                     }                     elem.classname = newclass.replace(/^\s+|\s+$/g, '');                 } else {                     elem.classname += '' + classname;                 }             }              thetoggle.onclick = function() {                toggleclass(this, 'on');                if ($(this).hasclass('on')) {                    $('#menu').css({                         opacity: '1',                         visibility: 'visible'                    });                 } else {                     $('#menu').css({                         opacity: '0',                         visibility: 'hidden'                    });                };                return false;              } 

css:

    .category_bar {     padding: 20px;     padding-bottom: 10px;     background-color: #274566; }  .category_bar .menu_categorias span.cat{     position: absolute;     line-height: 43px;     color: #ffffff;     font-size: 25px;     display: inline-block;     margin-left: 10px;     font-family: 'roboto condensed', sans-serif; }  #menu {     background-color: #274566;     padding: 15px;     opacity: 0;     visibility: hidden;     -webkit-transition: 400ms ease;     -moz-transition: 400ms ease;     -ms-transition: 400ms ease;     -o-transition: 400ms ease;     transition: 400ms ease; }  .col_menu {     border-right: 1px solid #eeeeee; }  #menu ul{     list-style: none;     color:#ffffff; }      #menu ul li{         margin: 5px 0;         padding: 0 10px;         margin-bottom: 15px;     }          #menu ul li a{             color: #ffeb3b;             text-decoration: none;         }          #menu ul.submenu{             padding-left: 10px;         }          #menu ul.submenu li{             margin-bottom: 5px;         }          #menu ul.submenu a{             color: #ffffff;         }  #toggle {   display: inline-block;   width: 28px;   height: 30px;   margin: 18px auto 10px; }  #toggle span:after, #toggle span:before {   content: "";   position: absolute;   left: 0;   top: -9px; } #toggle span:after{   top: 9px; } #toggle span {   position: relative;   display: block; }  #toggle span, #toggle span:after, #toggle span:before {   width: 100%;   height: 5px;   background-color: #ffffff;   transition: 0.3s;   backface-visibility: hidden;   border-radius: 2px; }  /* on activation */ #toggle.on span {   background-color: transparent; } #toggle.on span:before {   transform: rotate(45deg) translate(5px, 5px); } #toggle.on span:after {   transform: rotate(-45deg) translate(7px, -8px); } #toggle.on + #menu {   opacity: 1;   visibility: visible; } 

does jsfiddle want?

it's not cleanest way this, i've changed thetoggle.onclick function as

thetoggle.onclick = function() {     $('#menu').css({         height: $("#menu").get(0).scrollheight,         opacity: 1,         marginbottom: '15px',         visibility: 'visible'     });      toggleclass(this, 'on');      if (!$(this).hasclass('on')) {         $('#menu').css({             opacity: 0,             marginbottom: 0,             height: 0,             visibility: 'hidden'         });     }      return false; } 

and adjusted padding on #menu

padding: 15px 15px 0; 

hope it's gonna you