When I click the + drop down button in the HTML below, it doesn't show the inner content as expected.
<div style="text-align: center; font-family: 'Chronicle-Display-Roman'; font-size: 16px;">For all sizing information please click on the links below:</div>
<p> </p>
<div class="sizingAcc" style="max-width: 910px; margin: auto; font-family: 'Century Gothic'; margin-bottom: 20px;">
<div class="sizingBtn toggle">Information <span class="plusSign">+</span></div>
...
<!-- More HTML content here -->
...
</style>I've tried adding the code below to make the inner content display only when clicking the + drop down button:
.sizingDrp.inner.show
{
display: block;
}
If anyone has any suggestions on how to get this code working properly to show the inner content upon clicking the dropdown button, your help would be greatly appreciated. Thank you!
Edit:
I attempted to add the following JS code, but unfortunately, it's not functioning as intended:
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
$(document).ready(function() {
$('.sizingBtn.toggle').click(function() {
$(this).next('.sizingDrp.inner').toggleClass('show');
$(this).find('.plusSign').text(function(_, text) {
return text === '+' ? '-' : '+';
});
});
});
</script>