Seeking a solution in JS, I am facing a challenge in creating a series of elements with active states, each opening a caption below when clicked. Utilizing .addClass, .removeClass, and .toggleClass in combination, only one element can be active at a time.
View the result here. Feel free to request the lengthy HTML if needed.
Although I have made progress, I am unable to close the caption area once it has been opened. The absolute positioning of captions within a relative parent prevents them from influencing the parent's height. Despite using .lcs-closed in #landercaptions to open up space and remove the class when an element is active, I struggle to revert it when no elements are active.
I am contemplating an approach where if no element has the class .sh-active, I add the class .lcs-closed to #landercaptions. I have experimented with .hasClass post page load but haven't landed on a working solution.
These are snippets of my code:
<script type="text/javascript">
$('#one').click( function() {
$("#capone").toggleClass("lc-hidden");
$("#captwo, #capthree, #capfour").addClass("lc-hidden");
$("#two, #three, #four").removeClass('sh-active');
$("#one").toggleClass('sh-active');
$("#landercaptions").removeClass("lcs-closed");
} );
// Additional click functions for elements two, three, and four
</script>
How can I ensure that the page reverts to its original state where all elements are inactive (caption area closed)? Any suggestions on modifying the existing JS script are appreciated.
EDIT Including the corresponding HTML:
<div class="landercols">
<div class="lcheader">
<h1 class="center">GoParenting. For growing families.</h1>
</div>
// Nested divs for each step holder and corresponding captions
</div>