I've been searching all the net and the StackOverflow for a while and couldn't really find a specific example about my case. I am embedding javascript to a website and I am manipulating markdown language to create dropdown menus.

    <script>      $(document).ready(function(){

    $('.markdown-block .sqs-block-content h3').css('cursor','pointer');

    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();

    $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});

    });    </script>

This is the script that I am using. It's working when I implement it with only but only "###" however, I want to implement it with depth level 2. Namely, I want h3 that has sub headers like h4 and they are inside the content of h3 and h4 headers will also be dropdown. I tried to implement it yet it's somehow broken. I will put the image below.

When the h3 is not clicked, the content under h4 is somehow shown.

When I click h3, content under h4 is gone and now h4s come.

When the h4 is clicked finally the content is shown again.

I don't know why this is happening. I tried writing the same javascript code for also h4 and it really made it worse. Without h4 js code there is only dropdown for general headers (h3) and that's not what I want. Thanks in advance!