Como crear unha etiqueta colapsable en Moodle

A moitos docentes gústanos que a aula virtual teña unha certa apariencia cunha páxina web. Para isto empregamos moito o recurso etiqueta.

Sen embargo, esta disposición tamén presenta un problema. Ao incrementar os contidos, resulta bastante pesado o desprazamento ao longo da aula virtual, empregndo a roda do rato. Unha maneira de solventalo é creando sección colapsables, é dicir, que por defecto aparezan minimizadas e ao clicar nun botón que se expandan:

Para crear isto, pegamos o seguinte código como código html e introducimos os textos, vídeos, etc substitíndo o texto "Engadir contido aquí" polos contidos desexados, pero mantendo o resto do código.

 

<div id="nova">
            <i style="cursor: pointer;" class="fa fa-bars fa-2x amosar" id="amosar" aria-hidden="true"
                onclick="let texto = this.parentElement.parentElement.getElementsByClassName('contido')[0]; mostra_oculta(texto);"></i>
            <div class="contido">
                Engadir contido aquí

            </div>   
</div>

 <script>
 function mostra_oculta(texto){
    texto.style.display = (texto.style.display == 'none') ? 'block' : 'none';
    texto.style.border= "0px solid #cccccc";
    texto.style.padding= "10px";
 }

 window.onload = function(){
    var textos = document.querySelectorAll(".contido");
    for (var i=0; i<textos.length; i++){
        textos[i].style.display = 'none';
    }
 }

 </script>