I love the jQuery accordion. The only problem I'm having is in
customizing it to suit the type of user experience I want. Basically I
want a dead-simple, speaks for itself UI that accepts clicks in any
order on any item to open or close the accordion.
I have the whole accordion on a bunch of dt elements with hidden dd
elements that slideDown() when the dt is clicked. I know what I want I
just haven't been able to figure out how to do it:
Here's the idea:
$("dt p").on the first click(function() {
$(my hidden dd).slideDown();
});
$("dt p").on the second click || when the dd is visible
underneath(function() {
$("dd:visible").slideUp();
});
I also have this click handler available in case the user wants to
close the visible dd just by clicking it
$("dd:visible").click(function() {
$(this).slideUp();
});
Everything is working fine in a document.ready function, but I want
the dt to change class depending on whether the dd underneath it is
open or not. So that if clicked when nothing is visible it will be
visible and vis versa. I am thinking that the solution is some kind of
toggle OR addClass/removeClass. Simple solution I am missing?
