JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
		<div id="navigationbar">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span> 
						</button>
						<a class="navbar-brand" href="#">MAIN</a>
					</div>
					<div class="collapse navbar-collapse" id="myNavbar">
					<ul class="nav navbar-nav navbar-right" id="menu">
						<li><a href="">Home</a></li>                            
                        <li><a href="">Page1</a></li>
                        <li><a href="">Page2</a></li>
                        <li><a href="">Page3</a></li>
                        <li><a href="">Page4</a></li>
					</ul>
					</div>
				</div>
			</nav>
		</div>
		
		<div id="wrapper">
			<div id="main-wrapper" class="col-sm-6">
				<div class="panel panel-info" style="margin-top: 1%">
					<div class="panel-heading" id="JnName">
						<div class="row">
							<div class="col-sm-8">
								NAME : Somename
							</div>
							<div id="button_wrapper" class="col-sm-4" style="text-align: right;">
								<span id="buttonSpanWrapper" class="toggle-button bs-tooltip" id="ShowButton" style="cursor: pointer" data-toggle="tooltip" data-placement="left" title="Click to toggle sidebar">
									<span id="glyphbutton" class="glyphicon glyphicon-backward"></span>
								</span>
							</div>
						</div>
					</div>						
					<div class="panel-body" id="SVGPanel">
					</div>
				</div>
			</div>
		
		
			<div id="sidebar-wrapper" class="col-sm-6 sidebar">
				<div class="panel panel-info" style="margin-top: 1%;" id="JunctionParam">
					<div class="panel-heading"...

CSS

#sidebar-wrapper{opacity:1;}
#wrapper{display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}
#main-wrapper, #sidebar-wrapper {
    overflow: auto;
    height: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

JavaScript

$(document).ready( function() {
    $('#button_wrapper').click( function() {
       if($('#sidebar-wrapper').css('opacity') == 1) {
    $("#sidebar-wrapper").css({"opacity":"0"});
       } else{
       $("#sidebar-wrapper").css({"opacity":"1"});
       }
    });
        
    
});