Using jQuery to open collapsible sidebar options

user_16984446 0
Viewed 52

I've built a collapsible sidebar menu with icons using HTML, CSS & JS with UIKit and jQuery.

I want to use my sidebar icons to open each option and its drop down menu and not other options. I still want to use a hamburger button to open all options.

$('.side-menu li').on('click', 'a', function(e) {
  if ($(this).parent().children('ul').length) {
    e.preventDefault();
    $(this).addClass('active');
    $(this).parent().children('ul').slideDown();
    setTimeout(function() {
      $.fn.matchHeight._update();
      $.fn.matchHeight._maintainScroll = false;
    }, 1000);
  }
});

$('.side-menu li').on('click', 'a.active', function(e) {
  e.preventDefault();
  $(this).removeClass('active');
  $(this).parent().children('ul').slideUp();
  setTimeout(function() {
    $.fn.matchHeight._update();
    $.fn.matchHeight._maintainScroll = true;
  }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse" hidden>
  <aside class=" side-menu" style="list-style-type: none">
    <nav class="left-nav hidden-xs hidden-sm hidden-md">
      <ul class="nolist">
        <li class="opt1">
          <a href="#">Product</a>
          <ul>
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Pricing </a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="#/ ">Resources</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Customers</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li style="padding-bottom: unset;">
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </aside>
</div>
<div class="sidecnt ">
  <button id="btn " class="uk-button uk-button-default uk-invisible-hover " type="button " uk-toggle="target: .collapse; animation: uk-animation-slide-left-small; queued: true ">☰</button>
  <i class="fa fa-thumbs-up " href="# "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up "></i>
  <i class="fa fa-thumbs-up " style="padding-bottom: 32px"></i>
</div>

html jquery javascript
1 Answers

I did little changes to your code now it's working hope it may helpful for you. if anything is wrong please correct me.

<!DOCTYPE html>
<html>
<head>
<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.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
 $('.side-menu li').on('click', 'a', function(e) {
  if ($(this).parent().children('ul').length) {
    e.preventDefault();
    $(this).addClass('active');
    $(this).parent().children('ul').slideDown();
    
  }
});

$('.side-menu li').on('click', 'a.active', function(e) {
  e.preventDefault();
  $(this).removeClass('active');
  $(this).parent().children('ul').slideUp();
   
});
$("#btn").click(function(){
   if ($("#remove_collapes").hasClass("collapse")) {
    $("#remove_collapes").removeClass("collapse");
  }
  // Else, the element doesn't have the active class, so we remove it from every element before applying it to the element that was clicked
  else {   
    $("#remove_collapes").addClass("collapse");
  }
});
});
</script>
</head>
<body>
<div class="sidecnt">
  <button id="btn" class="uk-button uk-button-default uk-invisible-hover" type="button" uk-toggle="target: .collapse; animation: uk-animation-slide-left-small; queued: true">☰</button>
  <i class="fa fa-thumbs-up" href="# "></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up"></i>
  <i class="fa fa-thumbs-up" style="padding-bottom: 32px"></i>
</div>
<div class="collapse" id="remove_collapes">
  <aside class="side-menu" style="list-style-type: none">
    <nav class="left-nav">
      <ul class="nolist">
        <li class="opt1">
          <a href="#">Product</a>
          <ul class="ullist">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Pricing </a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="#/ ">Resources</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Customers</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li>
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
        <li style="padding-bottom: unset;">
          <a href="# ">Blog</a>
          <ul class="nolist ">
            <li><a href="# ">Websites</a></li>
            <li><a href="# ">Hosting</a></li>
            <li><a href="# ">Engagement</a></li>
            <li><a href="# ">Support</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </aside>
</div>
</body>
</html>

user_83849830
Related