Hello squarespace community,
I have made a page with a +- toggle foldout option. After the main 'head subject +' I would like to make another list with new +- options that are not visible when the head section is not opened.
Underneath how I would like it to look / work:
Head Subject + (always visible)
After opening:
Head Subject -
Secondary Subject + (Only visible when head subject is open)
Secondary Subject + (Only visible when head subject is open)
After opening secondary subject
Head Subject -
Secondary Subject - (Only visible when head subject is open)
Information about the secondary subject
Secondary Subject + (Only visible when head subject is open)
Does anyone have an idea if this is possible? And how?
My current page injection code:
<script>
$(document).ready(function() {
$('.markdown-block .sqs-block-content h3, h4').addClass('ui-closed').css('cursor', 'pointer');
$('.markdown-block .sqs-block-content h3,h4').nextUntil('h3,h4').slideToggle();
$('.markdown-block .sqs-block-content h3,h4').click(function() {
if ($(this).nextUntil('h3,h4').is(':hidden')) {
$('.markdown-block .sqs-block-content h3,h4').nextUntil('h3,h4').slideUp();
$(".markdown-block .sqs-block-content h3,h4").removeClass('ui-open');
$(".markdown-block .sqs-block-content h3,h4").addClass('ui-closed');
$(this).nextUntil('h3,h4').slideDown();
$(this).toggleClass('ui-closed ui-open');}
else
{
$(this).nextUntil('h3,h4').slideUp();
$(this).toggleClass('ui-closed ui-open');}
});
});
</script>
