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.