This accordion is designed to open independent hh-content-entry divs on click:
Using jQuery:
$(".hh-content-entry").slideUp();
$(".hh-title-entry").click(function(){
$(this).next(".hh-content-entry").slideToggle("slow");
In HTML:
<div class="hh-title-entry">Week One</div>
<div class="hh-entry-content">Lorem ipsum dolor, consectetur adipiscing.</div>
<div class="hh-title-entry">Week Two</div>
<div class="hh-entry-content">Lorem ipsum dolor, consectetur adipiscing.</div>
<div class="hh-title-entry">Week Three</div>
<div class="hh-entry-content">Lorem ipsum dolor, consectetur adipiscing.</div>
The Question: How can I add a "hover" class to the .hh-title-entry titles since traditional a href links aren't used and regular a:hover CSS won't work?
An active class isn't necessary as it can be applied to .hh-content-entry since each div remains hidden until opened. However, having a hover class for both open and closed .hh-title-entry divs would be beneficial.
Any ideas on how to achieve this?
Fiddle available at JSFiddle