jQuery Toggle Show Hide - Slide Toggle

by Isabel Castillo

HTML

<h2 class="clickable-heading">Click to See jQuery Slide Toggle</h2>

<ul style="display:none">
    <li><a href="#">How To Do This</a>

    </li>
    <li><a href="#">Installing in The Mid 90s</a>

    </li>
</ul>

<h2 class="clickable-heading">Click This Toggle 2</h2>

<ul style="display:none">
    <li><a href="#">Vote For Pedro</a>

    </li>
    <li><a href="#">Your Name is Napoleon?</a>

    </li>
</ul>

CSS

.clickable-heading {
    cursor: pointer
}
.clickable-heading:hover {
    color:#515151
}

JavaScript

jQuery(".clickable-heading").click(function () {
    jQuery(this).next().slideToggle();
}).next().hide();