Co obxectivo de diminuír o tamaño da páxina principal do curso e evitar un scroll infinito, podemos agrupar a información en bloques colapsados, que só activaremos cando interese visualizalos, pero por defecto aparecen minimizados. Aínda que hai moitos xeitos de facelo, penso que botar man das librerías vue.js simplifica moito o código. Para introducir este código debemos de premer no botón de inserir código html

Para personalizar os contido, cambiamos desde "<h2> What is..." ata "of Lorem Ipsum </p>". No caso que metamos este recurso varias veces, teremos que ir substituíndo todas as entradas de cadroTexto (premendo no mousepad a combinación de teclas Ctrl + h substituímos moi rápido todas as entradas), por outras con diferente nome, por exemplo: cadroTexto2, cadroTexto3

<div id="cadroTexto">
    <button @click="visualizacion" class="fa fa-bars fa-2x"></button>
    <div v-if="isVisible" class="alert alert-success" role="alert">
        <h2> What is Lorem Ipsum?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script>
    const cadroTexto = new Vue({
        el: '#cadroTexto',
        data: {
            isVisible: false,
        },
        methods: {
            visualizacion(e) {
                e.preventDefault()
                this.isVisible = !this.isVisible
            }
            
        }
    })
</script>

 

Descargar o código