He estado buscando en toda la red y StackOverflow por un tiempo y realmente no pude encontrar un ejemplo específico sobre mi caso. Estoy incrustando javascript en un sitio web y estoy manipulando el lenguaje de rebajas para crear menús desplegables.

 <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>

Este es el script que estoy usando. Funciona cuando lo implemento solo con "###", sin embargo, quiero implementarlo con el nivel de profundidad 2. Es decir, quiero que h3 tenga subencabezados como h4 y que estén dentro del contenido de los encabezados h3 y h4. también ser desplegable. Traté de implementarlo, pero de alguna manera está roto. Pondré la imagen a continuación.

Cuando no se hace clic en h3, el contenido debajo de h4 se muestra de alguna manera.

Cuando hago clic en h3, el contenido debajo de h4 desaparece y ahora vienen h4.

Cuando finalmente se hace clic en h4, el contenido se vuelve a mostrar.

No sé por qué sucede esto. Intenté escribir el mismo código javascript también para h4 y realmente empeoró las cosas. Sin el código h4 js, solo hay un menú desplegable para encabezados generales (h3) y eso no es lo que quiero. ¡Gracias por adelantado!