railsgoat/app/views/layouts/tutorial/_sidebar.html.erb

<div id="mainnav" class="hidden-phone hidden-tablet">
  <ul style="display: block;">
    <li id="injection">
      <%= link_to injection_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A1 Injection
     <% end %>
    </li>
    <li id="xss">
     <%= link_to xss_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
       A2 XSS
      <% end %>
    </li>
    <li id="broken_auth">
      <%= link_to broken_auth_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A3 Broken Auth
      <% end %>
    </li>
    <li id="insecure_doa">
      <%= link_to insecure_doa_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A4 Insecure DOA
      <% end %>
    </li>
    <li id="csrf">
      <%= link_to csrf_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A5 CSRF
      <% end %>
    </li>
    <li id="misconfig">
      <%= link_to misconfig_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A6 Misconfig
      <% end %>
    </li>
    <li id="crypto">
      <%= link_to crypto_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A7 Crypto
      <% end %>
    </li>
    <li id="url_access">
      <%= link_to url_access_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A8 URL Access
      <% end %>
    </li>
    <li id="ssl_tls">
      <%= link_to ssl_tls_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A9 SSL/TLS
      <% end %>
    </li>
    <li id="redirects">
     <%= link_to redirects_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A10 Redirects
     <% end %>
    </li>
    <li class="submenu">
      <a href="#" class="selected">
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe0b8;"></span>
        </div>
        Extras
      </a>
      <ul>
        <li>
          <a href="#">Guard</a>
        </li>
        <li>
          <a href="#">Session Secret</a>
        </li>
        <li>
          <a href="#">DB Sessions</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

<script type="text/javascript">
//Main menu navigation

$('.submenu > a').click(function(e){
  e.preventDefault();
  var submenu = $(this).siblings('ul');
  var li = $(this).parents('li');
  var submenus = $('#mainnav li.submenu ul');
  var submenus_parents = $('#mainnav li.submenu');
  if(li.hasClass('open'))
  {
    if(($(window).width() > 768) || ($(window).width() < 479)) {
      submenu.slideUp();
    } else {
      submenu.fadeOut(250);
    }
    li.removeClass('open');
  } else 
  {
    if(($(window).width() > 768) || ($(window).width() < 479)) {
      submenus.slideUp();     
      submenu.slideDown();
    } else {
      submenus.fadeOut(250);      
      submenu.fadeIn(250);
    }
    submenus_parents.removeClass('open');   
    li.addClass('open');  
  }
});

var ul = $('#mainnav > ul');

$('#mainnav > a').click(function(e)
{
  e.preventDefault();
  var mainnav = $('#mainnav');
  if(mainnav.hasClass('open'))
  {
    mainnav.removeClass('open');
    ul.slideUp(250);
  } else 
  {
    mainnav.addClass('open');
    ul.slideDown(250);
  }
});

</script>