Menu

Custom Themes - Collapsing Curriculum By Default

If you'd like your course curriculum to be COLLAPSED by default on your Thinkific landing pages, you can do this using custom themes!



To learn more about setting up custom themes for your site, and setting your course to use your theme, visit: http://help.thinkific.com/support/solutions/articles/216715

To change your course curriculum to be collapsed by default, you'll need to replace the existing "course_landing_page_curriculum" snippet with the following code: 


{% comment %}

  This is the curriculum for the course landing pages.

{% endcomment %}

{% for chapter in page.course.chapters %}

  {% assign index = forloop.index + 1 %}

  <div class='curriculum-chapter'>

    <div class='chapter-toggle'>

      <div class='curriculum-chapter-header'>

        <div class='row'>

          <div class='col-sm-12'>

            <div class='row'>

              <div class='col-sm-9'>

                <span class='chapter-header'>

                  {{ chapter.name }}

                </span>

              </div>

              {% if chapter.duration_in_seconds > 0 %}

                <div class='col-sm-3'>

                  <div class='chapter-time'>

                    {{ chapter.duration_in_seconds_as_time }}

                  </div>

                </div>

              {% endif %}

            </div>

          </div>

        </div>

        <div class='col-sm-12 chapter-description'>

          {{ chapter.description }}

        </div>

      </div>

      <div class='row collapse' id='collapse{{ index + 1 }}'>

        <div class='col-sm-12'>

          <div class='chapter-list'>

            {% for content in chapter.contents %}

              <div class='chapter-list-item'>

                <span class='chapter-list-item__title'>

                  {{ content.name }}

                  {% if content.free %}

                    <span class='label label-free'>

                      {{ 'liquid.partials.course_landing_page_curriculum.label_free' | translate }}

                    </span>

                  {% endif %}

                </span>

                <i class='{{ content.icon_css_class }}'></i>

              </div>

            {% endfor %}

          </div>

        </div>

      </div>

      <div class='row'>

        <div class='col-sm-12'>

          <div class='toggle-content' data-toggle='collapse' data-target='#collapse{{ index + 1 }}'>

            Show Content

          </div>

        </div>

      </div>

    </div>

  </div>

{% endfor %}




And that's it! Be sure to save your work, and then set your course to use the custom theme landing page. Visitors will now see the curriculum section collapsed by default. 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.