Toggle Menu with animation

Question

I have some Toggle menu animation on my Category Menu. The Idea is when the user click on the toggler item, the content is pushed down, and the menu appears. When clicked again, the content back to normal place, and the menu disappears.

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

Here is the link with the 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: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 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: all 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;
}

Answer 1

Does this JSFiddle do what you want?

It's probably not the cleanest way to do this, but I've changed your 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 just adjusted your padding on #menu as

padding: 15px 15px 0;

Hope it's gonna help you