Academics with everything listed

by kevee

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="well"><p class="lead">Some of our majors have wacky names, if you don't see what you are looking for, try searching below</p><form class="form-inline">
                <div class="form-group">
                    <input type="text" id="keyword" class="form-control input-lg"/>
                </div>
                <input type="submit" value="Search" class="btn btn-primary btn-lg"/>
            </form>
          </div>
          <div id="results" style="display:none;">
              <h2>Search Results</h2>
              <ul>
                  
              </ul>
            </div>
        </div>
    </div>
    <div class="row" id="stuff">
        <div class="col-md-6">
             <h2>Majors</h2>

            <ul class="list-unstyled">
                <li><a href="#" class="more-link">Accounting</a>
                    <div class="more well">
                        
                        <ul>
                            <li><a href="http://catalog.csumb.edu/undergrad-education/majors/business-admin">Business Admin B.S.</a>            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#" class="more-link">Animation</a>
                    <div class="more well">
                        
                        <ul>
                            <li><a href="http://catalog.csumb.edu/undergrad-education/majors/teledramatic-arts">Cinematic Arts and Technology B.A.</a>            </li>
                            <li><a href="http://catalog.csumb.edu/undergrad-education/majors/communication-design">Communication Design B.S.</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#" class="more-link">Agribusiness</a>
                   ...

CSS

.more {
  display: none;
}

JavaScript

$('.more-link').each(function() {
      var majorName = $(this).text();
      $(this).html($(this).html() + ' (' + $(this).parents('li').find('li').length + ')');
      $(this).next('.more').prepend('<p>You can study '+ majorName +' in one of the following majors:</p>');
                        
});
$('form').first().on('submit', function(event) {
       event.preventDefault();
    $('#results li').remove();
    $('#results').show();
    var keyword = $('#keyword').val().toLowerCase();
    $('#stuff .list-unstyled > li').each(function() {
        console.log($(this).find('a').first().text().toLowerCase().search(keyword));
        if($(this).find('a').first().text().toLowerCase().search(keyword) !== -1) {
            var clone = $(this).clone();
            clone.find('.more').removeClass('well').show();
            
           $('#results ul').append(clone);
        }
    });
});
$('.more-link').on('click', function(event) {
    event.preventDefault();
    if($(this).hasClass('showing')) {
        $(this).removeClass('showing');
        $(this).next('.more').hide();
    }
    else {
        $(this).addClass('showing');
        $(this).next('.more').show();
    } 
});