We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Topic Group

Example:

Topics Group Title

  • Topic Title One

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.

  • Topic Title Two

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.

  • Topic Title Three

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.

  • Topic Title Four

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.

  • Topic Title Five

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.

Code

HTML

<div class="topic-group full-width">           
    <div class="topics-nav">
        <h3 class="topics-nav-title h4">Topics Group Title</h3>
        <ul class="topics-nav-list">
            !--The list items here are being created dynamically by JavaScript due to the way the component was built in sitecore. However, I have added sample code here for demo only. Or, if you use this component outside of sitecore, you will need to use list items structured as such. --!
            <li class="topics-nav-list-item"><a href="#topic-title-one" data-toggle="tab">Topic Title One</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-two" data-toggle="tab">Topic Title Two</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-three" data-toggle="tab">Topic Title Three</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-four" data-toggle="tab">Topic Title Four</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-five" data-toggle="tab">Topic Title Five</a></li>
        </ul>
    </div>
    <div class="topics">
        <noscript>
            <style>
                .tab-content > .tab-pane {
                    display: block;
                    opacity: 1;
                }
                .topic-group > .topics {
                    display: block;
                    opacity: 1;
                }
            </style>
        </noscript>
        <ul class="tab-content topics-list">
            <li id="topic-title-one" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title One</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-two" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Two</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-three" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Three</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-four" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Four</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-five" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Five</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
        </ul>
        <div class="topics-nav-buttons">
            <button class="cfaicon-arrow_left topics-nav-buttons-previous" disabled="disabled" aria-labelledby="unique-id-1"><span id="unique-id-1" class="screen-reader-only">Previous section</span></button>
            <button class="cfaicon-arrow_right topics-nav-buttons-next" disabled="disabled" aria-labelledby="unique-id-2"><span id="unique-id-2" class="screen-reader-only">Next section</span></button>
        </div>
    </div>
</div>
        

Documentation

Problem Being Solved

Users need to interact with long content in a way that allows them to go directly to the topic they’re interested in.

When To Use

It can be used when longer content needs to be broken into smaller, related chunks to be easily scanned and consumed. For example, it can be used to display CFA Program curriculum topics.

When Not To Use

Because of UI limitations, each topic in a group should be kept fairly short.

Formatting

  • This list is unordered and should not have a style type (i.e., no bullets). Any numbers or letters must be entered as text in Sitecore.
  • Place topic-group in a section that has the class name "grid-container"
  • Make sure to include the <noscript> tag section right inside the topics div, before the topics-list unordered list so that if JavaScript doesn't load, all of the content sections will display.
  • Make sure value for each select option is the id of the related topic.