JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<div class="nav-container">
    <div class="nav nav-pills nav-stacked">
      <ul class="nav nav-pills nav-stacked">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
          <ul class="dropdown-menu">
            <li><a href="http://www.asla.org/design/index.html" target="_blank">What Is Landscape Architecture?</a></li>
            <li><a href="http://www.youtube.com/watch?v=zbx3FDDNeQM" target="_blank">I Want to Be a Landscape Architect (Video)</a>
            <li><a href="http://www.asla.org/ContentDetail.aspx?id=12206&PageTitle=Education&RMenuId=54">What Skills Do I Need?</a></li>
            <li><a href="http://www.bls.gov/ooh/architecture-and-engineering/landscape-architects.htm" target="_blank">Future Career Prospects (U.S. Labor Department)</a></li>
          </ul>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">What Does A Landscape Architects Do?</a>
          <ul class="dropdown-menu">
            <li><a href="http://www.asla.org/ContentDetail.aspx?id=22922">Interviews with Leading Landscape Architects</a></li>
            <li><a href="http://www.asla.org/2013awards/index.html">ASLA Professional Awards</a></li>
            <li><a href="http://www.asla.org/2013studentawards/index.html">ASLA Student Awards</a></li>
            <li><a href="http://astore.amazon.com/a04806-20/detail/0470338458/190-5667858-4355216" target="_blank">Buy the Book:&nbsp;<em>Becoming A Landscape Architect</em></a></li>
          </ul>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
          <ul class="dropdown-menu">
            <li><a href="http://www.asla.org/sustainablelandscapes/index.html">Designing Our Future: Sustainable Landscapes</a></li>
            <li><a href="http://www.asla.org/sustainablelandscapes/videos.html">ASLA Animations</a></li>
          </ul>
       ...

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

JavaScript

$(document).ready(function () {


    $('.nav-pills ul li').on('click touchstart', function (e) {
        e.preventDefault();

        var checkElement = $(this).next();

        $('.nav-pills li').removeClass('open');
        $(this).closest('li').addClass('open');

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('open');
            checkElement.slideUp(300);

        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('.nav-pills ul ul:visible').slideUp(300);
            checkElement.slideDown(300);

        }
        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    });
});
(jQuery);