Bootstrap - Toggle sidebar with icons

Question

I have such a layout:

I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.

For now I have my header:

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
  <a class="navbar-brand" href="#">...</a>
</div>

But I don't know how to make it collapse when one clicks.. Thanks

Answer 1

In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.

Edit2: Improved example

 $('#togglebutton').click(function() { if ($(window).width() > 500) { //your chosen mobile res $('.text').toggle(300); } else { $('.menu').animate({ width: 'toggle' }, 350); } });

 ​.wrapper { width: 100% } .menu { background: #222; float: left; display: block; } .icon { max-width: 1em } .menu ul { list-style-type: none; margin: 0; padding: 0.2em 0.5em; } .menu li { margin: 0 } .menu a, .menu a:visited { color: white; text-decoration: none; } .text { display: inline; margin: 0; } .content { display: block; } button { margin: 1em; } @media only screen and (max-width: 500px) { .text { display: none; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="menu"> <ul> <li> <a href="#"> <img class="icon" src="http://bit.do/iconUrl"> <p class="text">Text 1</p> </a> </li> <li> <a href="#"> <img class="icon" src="http://bit.do/iconUrl"> <p class="text">Text 2</p> </a> </li> </ul> </div> <div class="content"> <button id="togglebutton">&#9776;</button> </div> </div>

Hope it was useful to have a general idea of my suggestion.

Answer 2

Update 2019

Bootstrap 4

This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.

https://www.codeply.com/p/e5IcpodgE2

Bootstrap 3

You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.

<div class="wrapper">
        <div class="row row-offcanvas row-offcanvas-left">
            <!-- sidebar -->
            <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
                <ul class="nav" id="menu">
                    <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
                </ul>
            </div>

            <!-- main right col -->
            <div class="column col-sm-9 col-xs-11" id="main">
                <a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a>
                <p>
                    content...
                </p>
            </div>
        </div>
</div>

https://www.codeply.com/p/uunNOeQAqo