title: How to do a side slide submenu?
body: <p>I managed a vertical slide side menu with a menu button.
  When I click on it, a menu appears/disappears from the left.
  I want to achieve the same effect when I click on a menu item that has a submenu. I did many attemps with no luck yet.
  I appreciate any suggestions of how to modify or to add to my code. 
  (I am aware I have to add some transitions..)</p>
  
  <p>It's obvious I am new with all this. Thanks in advance, best!</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="sp" &gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; 
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
          &lt;title&gt;Menúes&lt;/title&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="css/menup.css" /&gt;
  
           &lt;script src="js/jquery203.js"&gt;&lt;/script&gt; 
  
           &lt;script src="js/menup.js"&gt;&lt;/script&gt;        
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- Navigation --&gt;
          &lt;div class="container"&gt;
              &lt;div id="sidebar"&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li class="parent"&gt;&lt;a href="#" class="home"&gt;Home  &gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;ul class="submenu"&gt;
                              &lt;li&gt;&lt;a href="#" class="home"&gt;Home 11&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#" class="users"&gt;Home 12&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#" class="signout"&gt;Home 13&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;   
                      &lt;li&gt;&lt;a href="#" class="explore"&gt;Explore&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="users"&gt;   Users&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="signout"&gt;   Sign Out&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;                  
              &lt;/div&gt;
              &lt;div class="main-content"&gt;                  
                  &lt;a href="#" data-toggle=".container" id="sidebar-toggle"&gt;
                  &lt;span class="bar"&gt;&lt;/span&gt;
                  &lt;span class="bar"&gt;&lt;/span&gt;
                  &lt;span class="bar"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;div class="content"&gt;                       
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS3 code:</p>
  
  <pre><code>body, html {
      height: 100%;
      margin: 0;
      overflow:hidden;
      font-family: helvetica;
      font-weight: 100;
  }
  .container {
      position: relative;
      height: 100%;
      width: 100%;
      right: 0;
      -webkit-transition:  right 0.4s ease-in-out;
      -moz-transition:  right 0.4s ease-in-out;
      -ms-transition:  right 0.4s ease-in-out;
      -o-transition:  right 0.4s ease-in-out;
      transition:  right 0.4s ease-in-out;  
  
  }
  
  .container.open-sidebar {
      right: 240px;
  }
  
  
  #sidebar {
      position: absolute;
      right: -240px;
      background: #DF314D;  
      width: 240px;
      height: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      border-radius: 4px;
  
  }
  
  #sidebar ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  
  #sidebar ul li {
      margin: 0;
  
  }
  #sidebar ul li a {
  
      padding: 15px 20px 15px 35px;
      font-size: 16px;
      font-weight: 100;
      color: white;
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #C9223D;
  
      -webkit-transition:  background 0.3s ease-in-out;
      -moz-transition:  background 0.3s ease-in-out;
      -ms-transition:  background 0.3s ease-in-out;
      -o-transition:  background 0.3s ease-in-out;
      transition:  background 0.3s ease-in-out;
  }
  
  
  #sidebar li:hover { 
  
      background: #C9223D;
      border-radius: 4px;
  }
  
  
  .main-content {
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      position: relative;
  }
  
  .main-content .content{
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding-left: 60px;
      width: 100%;
  }
  .main-content .content h1{
      font-weight: 100;
  }
  .main-content .content p{
      width: 100%;
      line-height: 160%;
  }
  .main-content #sidebar-toggle {
      background: #DF314D;
      border-radius: 3px;
      display: block;
      position: relative;
      padding: 10px 7px;
      float: right;
  }
  .main-content #sidebar-toggle .bar{
      display: block;
      width: 18px;
      margin-bottom: 3px;
      height: 2px;
      background-color: #fff;
      border-radius: 1px;   
  }
  .main-content #sidebar-toggle .bar:last-child{
       margin-bottom: 0;   
  }
  
  .main-content #sidebar-toggle .bar{
      display: block;
      width: 18px;
      margin-bottom: 3px;
      height: 2px;
      background-color: #fff;
      border-radius: 1px;   
  }
  
  .main-content #sidebar-toggle .bar:last-child{
       margin-bottom: 0;   
  }
  
  
  .menu a.home {
  
      display: inline-block;
      background: url(../imagenes/bpi.png) no-repeat 4px 10px;
  
  
   }
  
  .menu a.explore { 
  
      display: inline-block;
      background: url(../imagenes/gasi.png) no-repeat 4px 10px;
   }
  
  .menu a.users { 
  
      display: inline-block;
      background: url(../imagenes/bicici.png) no-repeat 4px 10px; 
  }
  
  .menu a.signout { 
  
      display: inline-block;
      background: url(../imagenes/bai.png) no-repeat 4px 10px; 
  }
  
  
  #sidebar .menu .submenu {
      display: none;
  
  }
  
  
  #sidebar ul li ul.visible{    
      display: block;
  }
  
  .submenu a.home {
  
      display: inline-block;
      background: url(../imagenes/bpi.png) no-repeat 4px 10px;        
   }
  
  
  
  .submenu a.users { 
  
      display: inline-block;
      background: url(../imagenes/bicici.png) no-repeat 4px 10px; 
  }
  
  .submenu a.signout { 
  
      display: inline-block;
      background: url(../imagenes/bai.png) no-repeat 4px 10px; 
  }
  </code></pre>
  
  <p>JS code, it doesn't show the submenu in any manner.</p>
  
  <pre><code>$(document).ready(function() {
    $("[data-toggle]").click(function() {
      var toggle_el = $(this).data("toggle");
      $(toggle_el).toggleClass("open-sidebar");
    });
      $('parent').click(function() {
           $('.submenu').toggleClass('visible');
       });
  
    });
  </code></pre>