Toggle pure JS

<button onclick="toggle(document.getElementById('toggle'));return false;">Button</button> ::

<input onclick="toggle(document.getElementById('toggle'));return false;" type="button" value="Input"> ::

<a onclick="toggle(document.getElementById('toggle'));return false;" href="javascript://">Link</a>

<div id="toggle" class="toggle" style="display: none;">

    CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа,

    написанного с использованием языка разметки.

 

    Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью

    языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

</div>

<script language="JavaScript">

    var getHeight = function (el) {

        var el_style = window.getComputedStyle(el),

            el_display = el_style.display,

            el_position = el_style.position,

            el_visibility = el_style.visibility,

            el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''), wanted_height = 0;

        if (el_display !== 'none' && el_max_height !== '0') {

            return el.offsetHeight;

        }

        el.style.position = 'absolute';

        el.style.visibility = 'hidden';

        el.style.display = 'block';

 

        wanted_height = el.offsetHeight;

        el.style.display = el_display;

        el.style.position = el_position;

        el.style.visibility = el_visibility;

 

        return wanted_height;

    }, toggle = function (el) {

        var el_max_height = 0;

        if (el.getAttribute('data-max-height')) {

            if (el.style.maxHeight.replace('px', '').replace('%', '') === '0') {

                el.style.maxHeight = el.getAttribute('data-max-height');

            } else {

                el.style.maxHeight = '0';

            }

        } else {

            el_max_height = getHeight(el) + 'px';

            el.style['transition'] = 'max-height 0.5s ease-in-out';

            el.style.overflowY = 'hidden';

            el.style.maxHeight = '0';

            el.setAttribute('data-max-height', el_max_height);

            el.style.display = 'block';

            setTimeout(function () {

                el.style.maxHeight = el_max_height;

            }, 10);

        }

    };

</script>