Having just started working with jQuery, I'm struggling to figure out how to target specific elements when clicking on toggle buttons.
My goal is to toggle the class of each respective text container (from collapsed to expanded) when its corresponding toggle button is clicked. However, regardless of which toggle button I click on, all text containers seem to be affected.
Here is my current JavaScript code:
$(function() {
$(".toggleButton").click(function() {
$(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
// Other methods I've tried:
// $(this).parent(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
// $(this).parent.children(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
// $(this).parent.next(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
// $(this).parent(".parent").next(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
// $(this).parent(".parent").children(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
// $(this).parent(".parent").find(".textContainerCollapsed").toggleClass("textContainerExpanded", 500);
});
});
And here is a snippet of my HTML markup:
<div class="parent">
<div class="buttonContainer">
<a href="#" class="toggleButton">Toggle</a>
</div>
<div class="textContainerCollapsed">
Some text
</div>
</div>
<div class="parent">
<div class="buttonContainer">
<a href="#" class="toggleButton">Toggle</a>
</div>
<div class="textContainerCollapsed">
Some text
</div>
</div>
Lastly, here is the relevant CSS:
.textContainerCollapsed
{
height: 0px;
overflow: hidden;
}
.textContainerExpanded
{
height: 100%;
overflow: hidden;
}