I am trying to get a jQuery accordion to change the corner-roundedness based on whether it is active and whether it is the top, bottom, or sandwiched between the top and bottom headers.
I want the box that the accordion is contained in to be rounded on the top and bottom no matter what. By default, the accordion theme also has rounded corners on headers that are closed.
Is there a style method that can dictate to the accordion that, when inactive and between the top and bottom, to have 90-degree angles, while the bottom will have rounded corners while inactive, and 90-deg corners when active? Or is this going to be a more complicated exercise, with customized javascript?
What about using the .addClass and .removeClass to change the css of the accordion headers div element based on certain events? Active would be dictated when it is clicked on? Deactive when it is click on again to hide it?
You can check the .parent() or .sibling() elements to determine if it is below/beside/underneath other accordion header div elements?