JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<div class="panel-collapse collapse"><div class="col-md-4 col-sm-4 Padding5px">
                            <div class="panel-heading verticle-panel-title" id="Engines">
                                <h4 class="panel-title"></h4>
                            </div>
                            <div class="Engines-panel">
                                <h4 class="horizontal-panel-title">Engines
                                    @*<button class="btn btn-success btn-xs pull-right" href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>*@
                                </h4>
                                <div id="Engine-body" class="verticle-panel three-grids">
                                    <div id="wixMakePanel">
                                      
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 Padding5px">
                            <div class="panel-heading verticle-panel-title" id="ACESEngines">
                                <h4 class="panel-title"><a></a></h4>
                            </div>
                            <div class="ACESEngines-panel">
                                <h4 class="horizontal-panel-title">ACESEngines
                                    @*<button class="btn btn-success btn-xs pull-right" href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>*@
                                </h4>
                                <div id="ACESEngines-body" class="verticle-panel three-grids">
                                    <div id="acesMakePanel">
                                     
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 Padding5px">
                            <div...

CSS

.horizontal-panel-title {
    margin: 0px 0px 0px 30px;
    font-weight: bold !important;
    word-break:break-all;
}
 .verticle-panel {
    margin: 0px 0px 10px 0px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 0px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.18);
    width: 100%;
    display: block;
    overflow: hidden;
    height: auto;
    padding-left:30px!important;
}
 .verticle-panel-title  {
  width: 390px;
   z-index: 100;
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateX(-100%) rotate(-90deg);
   -webkit-transform-origin: right top;
   -moz-transform: translateX(-100%) rotate(-90deg);
   -moz-transform-origin: right top;
   -o-transform: translateX(-100%) rotate(-90deg);
   -o-transform-origin: right top;
   transform: translateX(-100%) rotate(-90deg);
   transform-origin: right top;
   float: left;
   color: #fff;
    background-color: #36c6d3;
    border-color: #2bb8c4;
    padding:5px;
    position: relative;
    margin: 0px 0px -30px 0px;
 }
 .NapaEngineBar , .AcesEngineBar , .NapaEngineBar{
     float:left;
 }

JavaScript

var col_md4 = $(this).parent().hasClass("col-md-4")
    var col_sm4 = $(this).parent().hasClass("col-sm-4")
    var col_md1 = $(this).parent().hasClass("col-md-1")
    var col_sm1 = $(this).parent().hasClass("col-sm-1")
    var col_md11 = $(this).parent().hasClass("col-md-11")
    var col_sm11 = $(this).parent().hasClass("col-sm-11")

    $('#Engines').click(function () {
        
        rightArrow.toggleClass('fa-angle-double-right fa-angle-double-left');
        leftArrow.toggleClass('fa-angle-double-left fa-angle-double-right');
        if (col_md4) {
            $(this).parent().toggleClass("col-md-4 col-md-10");
            $(this).parent().toggleClass("col-sm-4 col-sm-10");
        } else {
            $(this).parent().toggleClass("col-md-1 col-md-10");
            $(this).parent().toggleClass("col-sm-1 col-sm-10");
        }
        
        $('#ACESEngines').parent().toggleClass("col-md-4 col-md-1");
        $('#NAPAEngines').parent().toggleClass("col-md-4 col-md-1");
       // $(".ACESEngines-panel").toggle("slide");
       // $(".NAPAEngines-panel").toggle("slide");
    });
    $('#ACESEngines').click(function () {
        rightArrow.toggleClass('fa-angle-double-right fa-angle-double-left');
        leftArrow.toggleClass('fa-angle-double-left fa-angle-double-right');
        if (col_md4) {
            $(this).parent().toggleClass("col-md-4 col-md-10");
            $(this).parent().toggleClass("col-sm-4 col-sm-10");
        }
        else {
            $(this).parent().toggleClass("col-md-1 col-md-10");
            $(this).parent().toggleClass("col-sm-1 col-sm-10");
        }
        
        $('#Engines').parent().toggleClass("col-md-4 col-md-1");
        $('#NAPAEngines').parent().toggleClass("col-md-4 col-md-1");
       // $(".Engines-panel").toggle("slide");
       // $(".NAPAEngines-panel").toggle("slide");
    });
    $('#NAPAEngines').click(function () {
        rightArrow.toggleClass('fa-angle-double-right fa-angle-double-left');
       ...