Creating a Collapsible Block of Text or Transcript (Advanced)

Did you use the code provided here any time before July 14th, 2026? Your collapsible text areas (a.k.a accordions) may not be displaying as they normally do in your course editor (a.k.a editor view). Be sure to update your Javascript and CSS code with the updated code below. 😉

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. This needn’t be used just for transcripts: you can also use these toggles/accordions to divide your lesson content.

Because Teachery allows you to add custom code, CSS, and HTML, you can easily add a collapsible toggle that functions as depicted below.

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() {
    document.body.classList.add('accordion-js-loaded');

    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">Toggle Heading (Click to Toggle)</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 {
    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;
}

/* Initially collapse content in live lesson only (not in course editor) */
body.accordion-js-loaded .accordion-content {
    display: none;
}

/* When the accordion is open */
body.accordion-js-loaded .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);
}

/* Remaining code is for how the toggle appears in the course editor view only */
body:not(.accordion-js-loaded) .accordion {
    border: 2px dashed #d1bba5;
    border-radius: 10px;
    padding: 12px;
    background-color: #fdf7f2;
}

body:not(.accordion-js-loaded) .accordion-toggle {
    background-color: transparent;
    border: none;
	font-weight: 600;
    padding: 0 0 8px 0;
    cursor: default;
}

body:not(.accordion-js-loaded) .accordion-arrow {
    display: none;
}

body:not(.accordion-js-loaded) .accordion-content {
    padding: 8px 0 0 0;
    border: none;
    background-color: transparent;
}

Want to use multiple collapsible toggles?

That's partially why we recommend using the Text/Image content block! You can easily duplicate the block and quickly change it without having to jump into the code and, with content held in standalone blocks, it makes it easier to fix any issues you might hit.

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