Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="splitter-left ">
- <div class="close-left-btn">
- <button class="btn btn-primary" id="toggle-menu">Click me</button>
- </div>
- <div class="container-fluid content-close">
- <div class="row">
- <div class="col-4">
- <p>Home</p>
- </div>
- <div class="col-4">
- <p>About</p>
- </div>
- <div class="col-4">
- <p>Contact</p>
- </div>
- </div>
- </div>
- </div>
- <div class="splitter-right">
- <div class="container-fluid">
- <div class="row">
- <div class="col-12">
- <strong>Header options</strong>
- </div>
- </div>
- </div>
- </div>
- .splitter-left {
- display: inline-block;
- width: 25%;
- max-width: 300px;
- min-width: 250px;
- background-color: #fff;
- margin-top: 10px;
- margin-left: -35px;
- vertical-align: top;
- }
- .splitter-right {
- display: inline-block;
- width: 85%;
- margin-top: 10px;
- position: relative;
- left: 50px;
- min-height: 400px;
- }
- $("#toggle-menu").click(function () {
- if ($(".content-close").toggle()) {
- $(".splitter-left").toggleClass('sidemenu-close')
- $(".splitter-right").css({ width: '100%' });
- else {
- $(".splitter-right").css({ width: '75%' });
- }
- });
- .sidemenu-close {
- width: 0% !important;
- min-width: 0% !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement