Accordion

  1. On the page where you'd like to add the accordion, go to Edit and locate Javascript region.
  2. Click on "Choose Block". In the right panel, link to 2017 Design Master / shared blocks for javascript regions / for javascript regions / accordion script.
  3. Save and Submit.
  4. Open the relevant page(s), continue to “Edit” > “Configure”
  5. Scroll through the regions listed until you find five JavaScript regions.
  6. Click “Choose Block” on an empty path and load the corresponding block from your site’s directory.
  7. In the WYSIWYG source code editor insert the following script:

    <div class="accordion">
    <h3><a href="#">Drop-down 1</a></h3>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum, dui vitae imperdiet tincidunt, enim diam aliquam urna, eget posuere sem nisl ut lorem. Curabitur feugiat euismod euismod. Ut at dolor purus. Cras quis vulputate ipsum.</p>
    </div>
    <h3><a href="#">Drop-down 2</a></h3>
    <div>
    <p>Donec sodales ante quis justo dictum semper. Proin nec ultricies metus. Aliquam eleifend accumsan condimentum. Ut sagittis, dolor quis dignissim mattis, magna eros consequat magna, nec gravida neque turpis non tortor.</p>
    </div>
    <h3><a href="#">Drop-down 3</a></h3>
    <div>
    <p>Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.</p>
    </div>
    </div>

  8. The class must always be "accordion" and it is always 100% the width of its parent container (main content, right sidebar, left nav option, or a custom container with an assigned width). You may put whatever you like in these containers though (links, paragraphs, images, etc.). Use for the accordion titles and then place what you want in the drop-down in a div under the h3.

Example Accordion

Drop-down 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum, dui vitae imperdiet tincidunt, enim diam aliquam urna, eget posuere sem nisl ut lorem. Curabitur feugiat euismod euismod. Ut at dolor purus. Cras quis vulputate ipsum.

Drop-down 2

Donec sodales ante quis justo dictum semper. Proin nec ultricies metus. Aliquam eleifend accumsan condimentum. Ut sagittis, dolor quis dignissim mattis, magna eros consequat magna, nec gravida neque turpis non tortor.

Drop-down 3

Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.