jPack ToggleOnMobile Demo

Javascript component for toggling a normally visible/inline component on mobile

by Shane Stebner

HTML

<script src="https://htmlguyllc.github.io/jPack/dist/jpack.bundled.min.js"></script>
<div class="wrapper">
  <a href="#" class="toggle toggle1">Toggle</a>
  <div class="sidebar sidebar1">
    <h4>
      Filters
    </h4>
    <b>Categories</b>
    <ul>
      <li>Apparel</li>
      <li>Electronics</li>
      <li>Toys</li>
    </ul>
    <b>Price</b>
    <input> to <input>
  </div>
  <div class="main">
    On mobile, the sidebar will hover
  </div>
</div>

<hr>

<div class="wrapper">
  <a href="#" class="toggle toggle2">Toggle</a>
  <div class="sidebar sidebar2">
    <h4>
      Filters
    </h4>
    <b>Categories</b>
    <ul>
      <li>Apparel</li>
      <li>Electronics</li>
      <li>Toys</li>
    </ul>
    <b>Price</b>
    <input> to <input>
  </div>
  <div class="main">
    On mobile, the sidebar will show above
  </div>
</div>

<hr>

<div class="wrapper">
  <a href="#" class="toggle toggle3">Toggle</a>
  <div class="flex-row">
    <div class="sidebar sidebar3">
      <h4>
        Filters
      </h4>
      <b>Categories</b>
      <ul>
        <li>Apparel</li>
        <li>Electronics</li>
        <li>Toys</li>
      </ul>
      <b>Price</b>
      <input> to <input>
    </div>
    <div class="main">
      On mobile, the sidebar will slide in
    </div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

* {
  box-sizing: border-box;
}

.wrapper {
  position: relative;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.sidebar,
.main {
  display: inline-block;
}

.sidebar {
  min-height: 200px;
  width: 200px;
  color: white;
  background: navy;
  padding: 20px;
}

h4 {
  margin-top: 0;
}

input {
  width: 50px;
}

.main {
  height: 202px;
  width: calc(100% - 200px);
  float: right;
  color: white;
  background: black;
  padding: 20px;
}

.toggle {
  display: none;
}

@media only screen and (max-width: 800px) {
  .sidebar {
    display: none;
  }
  .main {
    width: 100%;
  }
  .sidebar1 {
    position: absolute;
    left: 5px;
    top: 28px;
    z-index: 2;
  }
  .sidebar2 {
    width: 100%;
  }
  .sidebar3 {
    width: 100%;
    max-width: 200px;
  }
  .sidebar.visible {
    display: block;
  }
  .toggle {
    display: block;
  }
}

JavaScript

/**
jPack ToggleOnMobile Demo
https://htmlguyllc.github.io/jPack/#toggleonmobile

As you can see, on desktop, the sidebar is always visible for a slick shopping experience. 

However on mobile, where the sidebar would take up too much space it becomes an absolutely positioned modal which you can open by clicking the link. 

If you click outside the modal, it goes away. 

If you resize your screen, you can see the sidebar hide on mobile, show on desktop. 

This is all based on the visibility of the toggle button. As long as your media queries control the button, this plugin will do the rest. 

The plugin just toggles a class, so in theory, you can do almost anything with the sidebar on mobile. 

You can have it slide in and continue to take up space on the page by pushing the results off-screen to the right, you can use the styling shown here where it's like a modal, you can have it display inline but above the results, etc. The possibilities are endless.
*/

var togglers = [];

//only takes a single line to enable this functionality
togglers.push(new jpack.ToggleOnMobile('.toggle1', '.sidebar1').init());

//a second version which displays inline
togglers.push(new jpack.ToggleOnMobile('.toggle2', '.sidebar2').init());

//a third version which slides in from the side above the content
togglers.push(new jpack.ToggleOnMobile('.toggle3', '.sidebar3').init());

//destroy all
/* 
togglers.forEach(function(toggler){
  toggler.destroy();
});
 */