JSFiddle - React, Tailwind, and code Playground

HTML

<div class="book-layout">
<div id="current-chapter-settings-container"
        class="side-menu-container horizontal-orientation-container">

        <div id="current-chapter-settings-flap"
            class="side-menu-flap horizontal-orientation-flap only-horizontal-flap">
            <div class="side-menu-flap-text">Chapter Settings</div>
        </div>
        
        <div id="current-chapter-settings-content" class="side-menu-content">
            Chapter Settings Content
        </div>

    </div>    
</div>

CSS

.book-layout {
border:1px dotted blue;
min-height:300px;
overflow:hidden;
position:relative;
}

 .side-menu-content {
        display:none;
     }
     
     .side-menu-container {
         
     }
     
     .horizontal-orientation-container {
         max-width:440px;
        left:50%;
        margin-left:-220px;
        position:absolute;
     }
     
     .side-menu-flap {
         display:block;
         cursor:pointer;
     }
     
     .horizontal-orientation-flap {
        margin-left: auto;
        margin-right: auto;
     }
     
     .only-horizontal-flap {
        margin-left: 92px;         
     }
     
     
     #current-chapter-settings-container {
         bottom:0;
     }
     
    
     #current-chapter-settings-flap {
         background-image: url("{{ STATIC_URL }}images/digital-book/bottomtab.png");
         background-repeat:no-repeat;
         height:63px;
        width:252px;
     }
     
     #current-chapter-settings-content {
         background-image: url("{{ STATIC_URL }}images/digital-book/bottomtray.png");
         background-repeat:no-repeat;
         height:171px;
        width:437px;
     }
          
    
     div.side-menu-flap-text {
        background-color:#99BBCC;
        color:white;
        font-size:1.2em;
        margin-left:30px;
        margin-top:10px;
        padding:10px;
        position:absolute;
        width:150px;
     }

JavaScript

var currentChapterSettingsFlap = $("#current-chapter-settings-flap");
var currentChapterSettingsContent = $("#current-chapter-settings-content");

currentChapterSettingsFlap.live("click", function() {
        
        if (currentChapterSettingsContent.is(":visible")) {
            currentChapterSettingsContent.slideDown();
            //currentChapterSettingsContent.hide();
            
            currentChapterSettingsFlap.addClass("only-horizontal-flap");
        } else {
                        currentChapterSettingsContent.slideUp();
            //currentChapterSettingsContent.show();
            currentChapterSettingsFlap.removeClass("only-horizontal-flap");
        }
        
    });