I've experimented with various methods like using :active, :focus, adding a class, and modifying CSS rules through jQuery to maintain the button highlight, but none of them have been successful. Please take a look at my code and point out any mistakes.
$(function() {
$("li.upper").hide();
$("li.lower").hide();
$("#header1").on('click', function() {
$("li.upper").slideToggle();
$("#header1").removeClass("active");
$(this).addClass("active");
});
$("#header2").click(function() {
$("li.lower").slideToggle();
$("li #header2").removeClass("active");
$("li #header2").addClass("active");
});
});body {
padding-top: 80px;
text-align: center;
font-family: monaco, monospace;
// background: url(http://media.giphy.com/media/Jrd9E2kuPuOYM/giphy.gif) 50%;
// background-size: cover;
}
h1 {
font-size: 30px
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="list">
<ul>
...
</ul>
</div>