How to create sidebar collapse in jquery?

Custom collapse sidebar: An example for sidebar collapsible without bootstrap, means you can create a sidebar using jquery and CSS. Here used methods are toggleClass() and removeClass(). For the CSS using pseudo-elements as :after and :before.

You can get code below for the collapsible sidebar example:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .menuContainer {

      background: #eee;

      position: fixed;

      top: 0;

      right: -260px;

      padding: 20px;

      height: 100%;

      width: 150px;

      transition: all 0.5s

    }

    .dropdownContainer {

      display: none;

      position: absolute;

      background: #fff;

      border-radius: 5px;

    }

    .dropdownContainer::before {

      content: '';

      border-top: 10px solid transparent;

      border-bottom: 10px solid #fff;

      border-left: 10px solid transparent;

      border-right: 10px solid transparent;

      position: absolute;

      left: 0;

      right: 0;

      margin: auto;

      text-align: center;

      width: 0;

      top: -20px;

    }

    .dropdownContainer a {

      display: block;

      font-size: 14px;

      color: #333;

      padding: 8px 10px;

      font-family: arial, sans-serif;

      text-decoration: none;

    }

    .dropdownContainer a:hover {

      background: #0bf;

      color: #fff;

    }

    .dropdownContainer a:hover:nth-of-type(1) {

      border-radius: 5px 5px 0 0;

    }

    .dropdownContainer a:hover:last-child {

      border-radius: 0 0 5px 5px;

      background: #0bf;

    }

    .showSS {

      display: inline-block;

    }

    .showMenu {

      display: inline-block;

      right: 0px;

      transition: all 0.5s;

      z-index: 10000;

    }

    .menuWrapper {

      position: fixed;

      height: 100%;

      width: 100%;

      top: 0;

      left: 0;

      z-index: 9999;

    }

    .navClick {

      position: relative;

      cursor: pointer;

      right: 200px;

      float: right;

    }

    .mainMenu ul {

      list-style: none;

      padding: 0;

    }

    .mainMenu ul>li {

      text-align: left;

    }

    .mainMenu ul>li>a {

      color: #333;

      padding: 15px 0;

      display: block;

      text-decoration: none;

      transition: all 0.5;

      font-family: arial, sans-serif;

      font-size: 16px;

    }

    .mainMenu ul>li>a:hover {

      color: #0bf;

      transition: all 0.5;

    }

    .navClick .bar1,

    .navClick .bar2,

    .navClick .bar3 {

      width: 30px;

      height: 4px;

      background: #0bf;

      margin: 7px 0;

      transition: 0.4s;

      display: block;

    }

    .menuBack {

      cursor: pointer;

      padding: 0;

      position: absolute;

      right: 20px;

      top: 10px;

    }

    .menuBack::after {

      content: '';

      width: 15px;

      height: 15px;

      border-right: 3px solid #333;

      border-bottom: 3px solid #333;

      position: absolute;

      transform: rotate(-45deg);

      right: 20px;

      top: 20px;

    }

    .menuBack:hover::after {

      border-right: 3px solid #0bf;

      border-bottom: 3px solid #0bf;

    }

    .menuBack:hover {

      color: #0bf;

    }

    .dropdowntoggleSS {

      position: relative;

    }

    .dropdowntoggleSS::after {

      content: '';

      position: absolute;

      border-left: 7px solid transparent;

      border-top: 7px solid #333;

      border-right: 7px solid transparent;

      border-bottom: 7px solid transparent;

      width: 0;

      margin-left: 6px;

      top: 22px;

    }

    .dropdowntoggleSS:hover::after {

      border-top: 7px solid #0bf;

    }

  </style>

</head>

<body>

  <div class="navClick"><span class="bar1"></span><span class="bar2"></span><span class="bar3"></span></div>

  <div class="menuWrap"></div>

  <div class="menuContainer">

    <div class="mainMenu">

      <div class="menuBack"></div>

      <ul>

        <li><a href="https://www.anythinglearn.com/">Home</a></li>

        <li><a href="#">About Us</a></li>

        <li><a href="#" class="dropdowntoggleSS">Tutorial</a>

          <div class="dropdownContainer">

            <a href="#">HTML</a>

            <a href="#">React</a>

            <a href="#">Angular</a>

            <a href="#">Latest Angular</a>

            <a href="#">Javascript</a>

          </div>

        </li>

        <li><a href="#">Contact Us</a></li>

      </ul>

    </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>

    $(function () {

      $('.navClick').click(function () {

        $('.menuContainer').toggleClass('showMenu');

        $('.menuWrap').toggleClass('menuWrapper');

      });

      $('.menuWrap').click(function () {

        $(this).removeClass('menuWrapper');

        $('.menuContainer').removeClass('showMenu');

      });

      $('.menuBack').click(function () {

        $('.menuWrap').removeClass('menuWrapper');

        $('.menuContainer').removeClass('showMenu');

      });

      $('.dropdowntoggleSS').click(function () {

        $('.dropdownContainer').toggleClass('showSS');

      });

    });

  </script>

</body>

</html>

You will found result as given screenshot below: