JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<div class="sv-vertical sv-layout exp_submenu sv-skip-spacer c574" id="svid10_ecea2cd1657f6c08c087a6" style="margin-bottom: 0px;">
    <div class="sv-vertical sv-layout exp-header sv-skip-spacer waves-effect waves-light" id="svid10_ecea2cd1657f6c08c087de">
        <div class="sv-spacer-0_7emhz sv-horizontal sv-layout sv-skip-spacer" id="svid10_ecea2cd1657f6c08c08814">
            <div class="sv-html-portlet sv-portlet sv-skip-spacer sv-horizontal-column" id="svid12_ecea2cd1657f6c08c0884a">
                <div id="HTML-0">
                    <!-- HTML -->
                </div><i class="fa fa-envelope fa-lg fa-inverse"></i>
            </div>
            <div class="sv-text-portlet sv-use-margins sv-horizontal-column" id="svid12_ecea2cd1657f6c08c0884b">
                <div id="Kontaktarubrik-0">
                    <!-- Kontakta - rubrik -->
                </div>
                <div class="sv-text-portlet-content">
                    <p class="sv-font-vit-overskrift">Kontakt</p>
                </div>
            </div>
        </div>
    </div>
    <div class="sv-vertical sv-layout exp-content c558" id="svid10_ecea2cd1657f6c08c087df">
        <div class="sv-script-portlet sv-portlet sv-skip-spacer" id="svid12_ecea2cd1657f6c08c054bd">
            <div id="Contact">
                <!-- Contact -->
            </div>
            <div class="con-contact">
                <div class="sv-vertical sv-layout sv-skip-spacer" id="svid10_ecea2cd1657f6c08c041fd">
                    <div class="sv-text-portlet sv-use-margins sv-skip-spacer c551" id="svid12_ecea2cd1657f6c08c05a51">
                        <div id="Text">
                            <!-- Text -->
                        </div>
                        <div class="sv-text-portlet-content">
                            <p class="normal"><strong>Förskoleenheten</strong><br>Västra Järnvägsgatan 11B<br>576 35 Sävsjö<br></p>
                        </div>
                    </div>
                </div>
      ...

CSS

.exp-header {
    background-color: #0083c3;
    color: #fff;
    padding: 1.5em 3em;
    margin: .5em 0 0 0;
    box-shadow: 0 8px 24px 0 rgba(0,0,0,0.16);
    line-height: 100%;
    z-index: 2;
    position: relative;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.exp-content {
    overflow: hidden;
    opacity: 0;
    position: absolute;

    border-color: #d6d6d6;
    box-shadow: 0 8px 24px 0 rgba(0,0,0,0.16);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0 0 1em 0;
    padding: 0;
	pointer-events: none;
}

.exp-content.open {
    position: relative;
    opacity: 1;
	pointer-events: auto;
}

JavaScript

// Height of content
$('.exp_submenu').each(function() {
    var contentHeight = $(this).find('.exp-content').height();
    $(this).find('.exp-content').attr('height', contentHeight);
});


// Click Toggle Function
$('.exp-header').click(function() {
    var contentHeightAttr = $(this).next().attr('height');

    var content = $(this).next();

    $(content).css({
        position: "relative",
        opacity: 1
    });
	
    // is Open
    if ( $(content).hasClass('open') ) {
        $(content).toggleClass('open').animate({
            'height': 0
        }, 200);
    } else {
    // is NOT Open
        $(content).height(0);
        $(content).toggleClass('open').animate({
            'height': contentHeightAttr
        }, 200);
    }

});