Creating a Collapsible Block of Text or Transcript (Advanced)

Having a transcript of lesson text is great for accessibility! But, it can be not so great for the overall experience in a lesson if a customer has to scroll, scroll, scroll to get to the bottom of a lesson to continue on.

Because Teachery allows you to add custom code, CSS, and HTML, you can easily add a collapsible toggle that functions like this:

As with all custom code, we ask you to proceed cautiously! If you end up pasting in the code below incorrectly, we are not able to troubleshoot it. Please just start from the beginning again and everything should work 👍.

Step #1: Add the Javascript (please do all 3 steps!)

You'll need to navigate to the Course Settings > Manage Options page and in the Head Tag Code Injection area you'll paste in the Javascript.

Here's the script code to add (make sure to click the Save Options button after adding it):

<script>
document.addEventListener('DOMContentLoaded', function() {
    const accordionToggles = document.querySelectorAll('.accordion-toggle');
    
    accordionToggles.forEach(function(toggle) {
        toggle.addEventListener('click', function() {
            const accordionContent = toggle.nextElementSibling;
            toggle.classList.toggle('active');
            accordionContent.classList.toggle('open');
        });
    });
});
</script>

Step #2: Add a new Text Content Block and Insert HTML

While you could use the existing "Transcript" text area in a Lesson (or Sublesson), using the Add Content Block > Add Text/Image can give you quite a bit more flexibility (plus, you could use this collapsible toggle anywhere in the Lesson page by moving the content block up or down).

Whether you use a Text/Image block OR the Transcript text area, the next step is to type a character, highlight it, and then navigate to the Code View in the editor widget.

Once in the Code View of that text area, paste in the HTML code below and be sure to click the </> icon in the top right of the text area to save it!

<div class="accordion">
	<div class="accordion-toggle"><span class="accordion-title">Click to Toggle 1</span> <span class="accordion-arrow">▶</span></div>
	<div class="accordion-content">

		<p>This is the content for inside the toggle (delete this line).</p>

		<p>PASTE YOUR CONTENT HERE</p>

		<p>Delete this line after pasting.</p>
	</div>
</div>

Tip: Make sure you're being careful when pasting in your text!

Because the inner toggle text is wrapped in a DIV, it can easily get deleted if you're not careful. Paste in your code, then carefully delete the sample top and bottom text.

Step #3: Add the Custom CSS

Next, navigate to the Style Your Course > Add Custom CSS area within the same course.

You'll definitely want to customize the CSS colors, padding, and borders to your liking, but this block of CSS will give you a huge head start.

When in the Add Custom CSS page, don't forget you can use the preview window on the right to choose the Lesson from the dropdown menu that has your HTML code added so you can see the styling right away!

.accordion {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
}

.accordion-toggle {
    background-color: #f5e8dc;
    border: 4px solid #d1bba5;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.accordion-toggle:hover {
    background-color: #ebdbc8;
}

.accordion-title {
    color: #333;
}

.accordion-arrow {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.accordion-content {
    display: none; /* Initially hide the content */
    padding: 0 20px;
    border-left: 4px solid #d1bba5;
    border-right: 4px solid #d1bba5;
    border-bottom: 0 solid #d1bba5;
    border-radius: 0 0 10px 10px;
    background-color: #f5e8dc;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
}

/* When the accordion is open */
.accordion-content.open {
    display: block; /* Show content */
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 4px solid #d1bba5;
    visibility: visible;
}

/* Rotate the arrow when the accordion is active */
.accordion-toggle.active .accordion-arrow {
    transform: rotate(90deg);
}

Want to use multiple collapsible toggles?

That's partially why we recommend using the Text/Image Block! You can easily duplicate the block and quickly change it without having to jump into the code 🤩.

If you don't like all the extra spacing between the text blocks, you will want to use one text block.

Hope you enjoy this advanced Teachery customization tip! 👋