Responsive 0.0

Javascript works in Fiddle but not anywhere else.

by Paul Schmitt

HTML

<body>
    <header>
         <h1>Header</h1>
    </header>
    <nav>
        <ul> <a href="#"><li>Cosmetic Injections</li></a>
 <a href="#"><li>Podiatry</li></a>
 <a href="#"><li>Remedial Massage</li></a>
 <a href="#"><li>Laser Therapies</li></a>
 <a href="#"><li>Skin Care</li></a>
 <a href="#"><li>Customer Care</li></a>
        </ul>
        <div class="handle">Menu<a style="float:right" href="#">&#9776;</a>
        </div>
    </nav>
    <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus nulla id magna interdum, nec consequat quam volutpat. Praesent scelerisque, mi a fermentum tempor, nulla quam commodo est, sed feugiat justo purus at ipsum. Praesent ac purus auctor, porta ligula ut, tempus augue. Aliquam at lacus urna. Aenean odio tellus, facilisis sed ex id, sollicitudin varius enim. Vestibulum vel velit hendrerit, ultricies dolor hendrerit, vestibulum neque. Fusce accumsan sodales urna quis placerat. Suspendisse euismod eros eget lobortis pharetra. Sed et elit viverra velit suscipit tincidunt et tincidunt mauris. Ut auctor mi vitae semper tincidunt. Etiam vitae maximus risus, nec commodo massa.</section>
</body>

CSS

body {
    margin:0;
    padding:0;
    font-family:sans-serif;
}
header {
    background-color:#00795F;
    width:100%;
    padding:40px 0;
    color: #FFF;
    text-align:center;
}
a {
    text-decoration: none;
    color: inherit;
}
nav ul {
    background-color: #43A286;
    overflow: hidden;
    color: #FFF;
    padding: 0;
    text-align: center;
    margin: 0;
    -webkit-transition: max-height 0.4s;
    -ms-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;
}
nav ul li {
    display: inline-block;
    padding: 20px;
    list-style: none;
}
nav ul li:hover {
    background-color: #399077;
}
section {
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0;
}
.handle {
    width: 100%;
    background-color: #005C48;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
    color: #FFF;
    display: none;
}
@media only screen and (max-width:580px) {
    nav ul {
        max-height: 0;
    }
    .showing {
        max-height: 20em;
    }
    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        text-align: left;
    }
    .handle {
        display: block;
    }
}

JavaScript

$('.handle').on('click', function () {
        $('nav ul').toggleClass('showing');
    });