Click here to Skip to main content
15,888,286 members
Search within:


How to create partial collapsible side menu ?
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi I want to create Partial Collapsible Side Menu using my exiting Code what trick should it do with my bleow code (jsFiddle Link)

HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


   <body>

   <div id="wrapper">
       <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
           <div class="container-fluid">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <div class="navbar-brand">
                       <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
                           
                       </a>
                       <a href="#">Project name</a>
                   </div>
               </div>
               <div id="navbar" class="collapse navbar-collapse" style="float:right;">
                   <ul class="nav navbar-nav">
                       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                   </ul>
               </div><!--/.nav-collapse -->
           </div>
       </nav>
       <!-- Sidebar -->

       <div id="sidebar-wrapper">
           <div class="panel-group" id="accordion">
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">

                           <a class="glyphicon glyphicon-user"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                           Admin</a>
                       </h4>
                   </div>
                   <div id="collapse1" class="panel-collapse collapse in">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a class="glyphicon glyphicon-equalizer" data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Master</a>
                       </h4>
                   </div>
                   <div id="collapse2" class="panel-collapse collapse">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a class="glyphicon glyphicon-transfer" data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Transaction</a>
                       </h4>
                   </div>
                   <div id="collapse3" class="panel-collapse collapse">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a class="glyphicon glyphicon-book" data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Reports</a>
                       </h4>
                   </div>
                   <div id="collapse3" class="panel-collapse collapse">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>


           </div>


       </div>
       <!-- Page content -->
       <div id="page-content-wrapper">
           <div class="page-content">
               <div class="container-fluid">
                   <div class="row">
                       <div class="col-md-12">
                           <div >
                               <div >

                               </div>
                               <div class="well-sm" style="margin:0px; padding:0px" >

                               </div>
                           </div>
                       </div>
                       @*<div class="col-md-6">
                           <div class="panel panel-success">
                               <div class="panel-heading">
                                   Panel 1
                               </div>
                               <div class="panel-body">
                                   content body
                               </div>
                           </div>
                       </div>*@
                   </div>
               </div>
           </div>
       </div>
   </div>


   <div class="container body-content">

       <hr />
       <footer>
           <p>©  - My  Application</p>
       </footer>
   </div>


   <script>
   /*Menu-toggle*/
   $("#menu-toggle").click(function (e) {
       e.preventDefault();
       $("#wrapper").toggleClass("active");
       //alert(1);
   });
   </script>


What I have tried:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


   <body>

   <div id="wrapper">
       <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
           <div class="container-fluid">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <div class="navbar-brand">
                       <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
                           class="fa fa-bars">
                       </a>
                       <a href="#">Project name</a>
                   </div>
               </div>
               <div id="navbar" class="collapse navbar-collapse" style="float:right;">
                   <ul class="nav navbar-nav">
                       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                   </ul>
               </div><!--/.nav-collapse -->
           </div>
       </nav>
       <!-- Sidebar -->

       <div id="sidebar-wrapper">
           <div class="panel-group" id="accordion">
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">

                           <a class="glyphicon glyphicon-user"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                           Admin</a>
                       </h4>
                   </div>
                   <div id="collapse1" class="panel-collapse collapse in">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a class="glyphicon glyphicon-equalizer" data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Master</a>
                       </h4>
                   </div>
                   <div id="collapse2" class="panel-collapse collapse">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a class="glyphicon glyphicon-transfer" data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Transaction</a>
                       </h4>
                   </div>
                   <div id="collapse3" class="panel-collapse collapse">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a class="glyphicon glyphicon-book" data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Reports</a>
                       </h4>
                   </div>
                   <div id="collapse3" class="panel-collapse collapse">
                       <div class="panel-body">
                           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                   </div>
               </div>


           </div>


       </div>
       <!-- Page content -->
       <div id="page-content-wrapper">
           <div class="page-content">
               <div class="container-fluid">
                   <div class="row">
                       <div class="col-md-12">
                           <div >
                               <div >

                               </div>
                               <div class="well-sm" style="margin:0px; padding:0px" >

                               </div>
                           </div>
                       </div>
                       @*<div class="col-md-6">
                           <div class="panel panel-success">
                               <div class="panel-heading">
                                   Panel 1
                               </div>
                               <div class="panel-body">
                                   content body
                               </div>
                           </div>
                       </div>*@
                   </div>
               </div>
           </div>
       </div>
   </div>


   <div class="container body-content">

       <hr />
       <footer>
           <p>©  - My  Application</p>
       </footer>
   </div>


   <script>
   /*Menu-toggle*/
   $("#menu-toggle").click(function (e) {
       e.preventDefault();
       $("#wrapper").toggleClass("active");
       //alert(1);
   });
   </script>
Posted
Updated 12-Mar-20 0:33am
v2
Add a Solution
Comments
ZurdoDev 11-Mar-20 16:17pm    
It is unlikely anyone is going to do all the work for you.
Asif 7969814 12-Mar-20 6:16am    
Hi ZurdoDev (MVP) I solved my problem by adding this code in my existing code

.B{
display:none;
}
.B.active{
width:50px;
display:block;
}
.A{
display:block;
}
.A.active {
display:none;
}


/*Menu-toggle*/
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
$("#B").toggleClass("active");
$("#A").toggleClass("active");


//alert(1);
});


thanks a lot for showing continuously interest in my question.
ZurdoDev 12-Mar-20 6:32am    
Please post that as a solution so that this no longer shows unanswered.

1 solution

Hi Friends I have solved my problem i used two div A and B and by j query i show both alternatively This is (JSFiddle Example) 



.B{
display:none;
}
.B.active{
width:50px;
display:block;
}
.A{
display:block;
}
.A.active {
display:none;
}


/*Menu-toggle*/
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
$("#B").toggleClass("active");
$("#A").toggleClass("active");


//alert(1);
});




if any one have more than better way Of this please show me your way.
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
How to create Collapsible Menu Control in asp.net?
menu strip in right side
Refresh partial view
How to create side bar menu in wpf application?
how we create a left side menu bar
creating menu in ASP.net
Partial views in MVC
Trouble with cascade menu in windows explorer
Highlight rows with collapsible nested grid
create side menu.containing sub menus

Advertise
Privacy
Cookies
Terms of Use
Last Updated 12 Mar 2020
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900