How can I hide and show submenu?

Question

I am trying to create a jQuery sliding navigation and I stumble into some problem. I don't know how to slide/hide and display my submenu.

Here's the HTML:

<div class="content">
  <div class="page-content">
  </div>
  <div class="sidebar-nav">
    <header class="logo"> 
        <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> 
            <span id="logo">NAV</span> 
     </header>

    <div class="nav">
      <ul id="nav" >
        <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
        <li><a href="#"><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span></a>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </li>

        </li>
        <li><a href="#"><i class="fa fa-gears"></i><span>Contact</span></a></li>
      </ul>
    </div>
  </div>
</div>

Please help!

Answer 1

There's an error in your JSFiddle concerning your toggle = !toggle. However, why not just use the $('#elementId').toggle()? It's JQuery, and it simplifies this code massively. See here for my JSFiddle, and below for my code.

HTML:

<nav class="sidebar-nav">
  <header class="logo">
    <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a>
    <span id="logo">NAV</span>
  </header>
  <ul id="nav" class="nav">
    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i></a>
    <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
      <li><a href="#">profile.1</a></li>
      <li><a href="#">profile.2</a></li>
      <li><a href="#">profile.3</a></li>
    </ul>
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu2" aria-expanded="false"><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i></a>
      <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
        <li><a href="#">About.1</a></li>
        <li><a href="#">About.2</a></li>
        <li><a href="#">About.3</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-history"></i>Blog</a></li>
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu3" aria-expanded="false"><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i></a>
      <ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
        <li><a href="#">Deals.1</a></li>
        <li><a href="#">Deals.2</a></li>
        <li><a href="#">Deals.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS (I took a lot of this from the original Fiddle):

html,
body {
  font-family: 'Lato', sans-serif;
  height: 100%;
  background: #ecf0f1;
}

a {
  color: #008DE7;
  font-style: italic;
  font-weight: 700;
}

.expandNav {
  float: right;
  padding-top: 4px;
}

.content {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.content.sidebar-collapsed {
  padding-right: 65px;
  transition: all 100ms linear;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back {
  padding-right: 280px;
  transition: all 100ms linear;
}

.content.sidebar-collapsed .sidebar-nav {
  width: 65px;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back .sidebar-nav {
  width: 280px;
  transition: all 100ms ease-in-out;
}

.content.sidebar-collapsed .logo {
  padding: 26px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back .logo {
  width: 100%;
  padding: 21px;
  height: 136px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
}

.content.sidebar-collapsed #logo {
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.content.sidebar-collapsed-back #logo {
  opacity: 1;
  transition: all 200ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed #nav span {
  opacity: 0;
  transition: all 50ms linear;
}

.content.sidebar-collapsed-back #nav span {
  opacity: 1;
  transition: all 200ms linear;
}

.sidebar-nav {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e74c3c;
  color: #aaabae;
  font-family: "Lato";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

#nav li {
  position: relative;
  margin: 0;
  font-size: 15px;
  border-bottom: 1px solid #fff;
  padding: 0;
}

#nav li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: block;
  padding: 16px 25px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  text-decoration: none
}

#nav li a:hover {
  color: #c0392b;
  background-color: #ecf0f1;
}

#nav ul li {
  background-color: #2b303a;
}

#nav li:first-child {
  border-top: 1px solid #fff;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#nav .fa {
  margin: 0px 17px 0px 0px;
}

.logo {
  width: 100%;
  padding: 21px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#logo {
  color: #fff;
  font-size: 30px;
  font-style: normal;
}

.sidebar-icon {
  position: relative;
  float: right;
  text-align: center;
  line-height: 1;
  font-size: 25px;
  padding: 6px 8px;
  color: #fff;
}

and JS (This was just to toggle the icons):

$('#nav a').click(function() {
  $(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});

Answer 2

try the following

css:

.disp {
  opacity: 1!important;
  height:auto!important;
   transition: height 100ms ease-in-out;
  transition-delay: 300ms;
}

js:

$('.nav a').click(function(){
$(this).closest('li').find('ul').toggleClass('disp');
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus');
});

http://jsfiddle.net/2tz4usnL/3/

Answer 3

Here is a Working Fiddle

Add this Scripts

$('#nav a .fa.fa-plus').on('click',function(){
  $(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons
  $(this).closest('li').find('ul').toggleClass('active');
});

And this CSS

#nav li ul {
  /*opacity: 0;*/ /* changed */
  height: auto; /* changed */
  display: none; /* added */
}

#nav li ul.active {    /* added */
 display:block;
}