"Show hide sidebar on button click on vue"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <button type="button" class="btn btn-success" @click="openSidebar('sidebar1')"><i class="fa fa-plus font-size-12 align-middle mr-2"></i> Add category </button> <!--sidebar--> <div class="side-menu" ref="sidebar1"> <a href="javascript:void(0)" class="closebtn" @click="hideSidebar('sidebar1')">×</a> <div class="row mt-5"> <div class="col-sm-12"> <h5>Add category</h5> <div class="table-responsive"> <table class="table mt-4"> <thead> <tr> <th scope="col">Title</th> <th scope="col">Image</th> <th scope="col">Subcategory attach</th> </tr> </thead> <tbody> <tr> <th scope="row">Dance</th> <td>Image</td> <td>Image</td> </tr> </tbody> </table> </div> </div> </div> </div> <!--sidebar-end--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> <script> export default { methods: { openSidebar(name) { let sidebar = this.$refs[name] console.log(sidebar); $(sidebar).show() }, hideSidebar(name) { let sidebar = this.$refs[name] $(sidebar).hide() } } } </script> </body> </html>
.side-menu { background: #ffffff; padding-top: 1.85714286em; margin: 0; height: 100%; box-shadow: 0px 0px 5px #000; width: 420px; position: fixed; right: 0px; top: 0px; overflow-x: auto; transition: 0.5s; padding-top: 60px; z-index: 1003; padding-left: 15px; padding-right: 15px; display:none; } .side-menu .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }

Questions / Comments: