JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <div class="tab-wrapper" id="tab1">
        <h2>Slide1</h2>
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </div>
    <div class="tab-wrapper" id="tab2">
         <h2>Slide2</h2>

        <div class="child">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </div>
    <div class="tab-wrapper" id="tab3">
         <h2>Slide3</h2>

        <div class="child">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </div>
    <div class="tab-wrapper" id="tab4">
         <h2>Slide4</h2>

        <div class="child">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </div>
    <div class="tab-wrapper" id="tab5">
         <h2>Slide5</h2>

        <div class="child">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </div>
    <div class="tab-wrapper" id="tab6">
         <h2>Slide6</h2>

        <div class="child">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        </div>
    </div>
</div>
</div>

CSS

body {
    font-size: 62.5%;
    background: #FFFFFF;
    text-align:left;
    margin:0px;
}
h2 {
    margin:0px;
    font-size:1.4em;
    color:#fff;
    font-weight:bold;
    line-height:22px;
    text-transform:uppercase;
}
h2 * {
    line-height:20px;
}
div.content {
    padding:10px;
    box-sizing:border-box;
}
#tabs .child {
    border:1px solid #4D4D4D;
    border-bottom:0px;
    height:auto;
    display:none;
    padding:10px;
    text-align:justify;
}
#tabs .child:nth-of-type(1) {
    display: none;
}
#tabs h2 {
    background:#363636;
    padding:10px;
    cursor:pointer
}
#tabs .child:last-child {
    border-bottom:1px solid #4D4D4D;
}
#tabs .child > p {
    margin:0px;
}
#tabs {
    display:inline-block;
    width:100%;
}
.tab-wrapper {
    float:left;
    width:50%;
    padding:5px;
    box-sizing:border-box;
}
#tab8 h1 {
    background:#66CC00;
    text-align:center;
    margin:0px;
    padding:10px;
}
#tab8 a {
    text-decoration:none;
    color:white;
}
.tab-wrapper.active {
    position:relative;
    top:0px;
    left:0px;
}

JavaScript

$(document).ready(function () {
    var zaehler = 0;
    $('#tabs h2').click(function () {
        if (zaehler == 0) {
            //Active Klasse hinzufĂĽgen / entfernen
            $('.tab-wrapper').removeClass('active');
            $(this).parents('.tab-wrapper').addClass('active');
            //Alle Slides auf 50% Breite nur das angeklickte auf 100%
            $('.tab-wrapper').css('width', '50%');
            $(this).parents('.tab-wrapper').css('width', '100%');
            //Inhalt ausfahren / einfahren
            $(this).next('div').slideToggle();
            zaehler = 1;
        } else {
            $('.tab-wrapper').removeClass('active');
            $(this).parents('div.tab-wrapper').css('width', '50%');
            $(this).next('div').slideToggle();
            zaehler = 0;
        }
    });
});