$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click
$("h4.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("h4.trigger").click(function(){
$(".toggle_container").slideUp(400);
$(this).next(".toggle_container").slideToggle(400);
});
$(".menu-first").toggle(function(){
$(this).addClass("active");
}, function(){
$(this).removeClass("active");
});
$("menu-first").click(function(){
$(".down-list").slideUp(400);
$(this).next(".down-list").slideToggle(400);
});
})
<div id="nav">
<a href="course.asp">
Start Course
</a>
<h4 class="trigger">
<a href="#">
Weigh In
</a>
</h4>
<div class="toggle_container">
<div class="block">
<ul class="drop-list">
<li>
<a href="progress.asp">
My Progress
</a>
</li>
<li>
<a href="weighin.asp">
Weigh In Now
</a>
</li>
<li>
<a href="weighin_history.asp">
Weight History
</a>
</li>
<li>
<a href="weighin_inchtrack.asp">
Inch History
</a>
</li>
<li class="last">
<a href="weighin_bmitrack.asp">
BMI Tracker
</a>
</li>
</ul>
</div>
</div>
<h4 class="trigger">
<a href="#">
Journal Entry
</a>
</h4>
<div class="toggle_container">
<div class="block">
<ul class="drop-list">
<li>
<a href="journal.asp">
My Journal
</a>
</li>
<li>
<a href="journal_entry.asp">
Write
</a>
</li>
</ul>
</div>
</div>
<h4 class="trigger">
<a href="#">
My Tools
</a>
</h4>
<div class="toggle_container">
<div class="block">
<ul class="drop-list">
<li>
<a href="tools_healthyweight.asp">
Healthy Weight
</a>
</li>
<li>
<a href="tools_calorieneeds.asp">
Calorie Needs
</a>
</li>
<li>
<a href="tools_heartrate.asp">
Target Heart Rate
</a>
</li>
<li>
<a href="tools_bmi.asp">
BMI Calculator
</a>
</li>
<li>
<a href="tools_eatrightchart.asp">
Eat-Right Chart
</a>
</li>
<li>
<a href="tools_glossary.asp">
Glossary
</a>
</li>
</ul>
</div>
</div>
<a href="tipofday.asp">
Tip of the Day
</a>
<h4 class="trigger">
<a href="#">
My Profile
</a>
</h4>
<div class="toggle_container">
<div class="block">
<ul class="drop-list">
<li>
<a href="profile.asp">
Goals
</a>
</li>
<li>
<a href="profile_settings.asp">
Settings
</a>
</li>
<li>
<a href="profile_mailingaddress.asp">
Mailing Address
</a>
</li>
<li>
<a href="profile_payment.asp">
Payment Info
</a>
</li>
<li>
<a href="profile_billinghistory.asp">
Payment History
</a>
</li>
</ul>
</div>
</div>
<a href="resources.asp">
My Resources
</a>
<a href="profile_help.asp">
Get Help
</a>
</div>