Dropdowns use the following syntax pattern:
<div class="dropdown">
<hr/>
<div class="dropdown__title">
<a href="#"><!-- title --></a>
<span class="dropdown__icon" aria-hidden="true"></span>
</div>
<div class="dropdown__content"><!-- content --></div>
</div>
In order to make them function properly, however, you need to employ the slide toggle framework which is built into the CGU Core JS.
Add the js-slide-toggle class to the dropdown__title element and specify a CSS selector for the data-target attribute. In this case, we want it to target .dropdown__content.
<div class="dropdown">
<hr/>
<div class="dropdown__title js-slide-toggle" data-target=".dropdown__content">
<a href="#"><!-- title --></a>
<span class="dropdown__icon" aria-hidden="true"></span>
</div>
<div class="dropdown__content"><!-- content --></div>
</div>
Example
<div class="dropdown">
<hr/>
<div class="dropdown__title js-slide-toggle" data-target=".dropdown__content">
<a href="#">Dropdown Title</a>
<span class="dropdown__icon" aria-hidden="true"></span>
</div>
<div class="dropdown__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a turpis dapibus, dignissim dolor sit amet, rutrum eros. Mauris eget lobortis sem. Integer sed blandit sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel rhoncus diam. Morbi a rhoncus erat, quis tempus risus. Etiam vel pretium orci.</p>
</div>
</div>
<div class="dropdown">
<hr/>
<div class="dropdown__title js-slide-toggle" data-target=".dropdown__content">
<a href="#">Dropdown Title</a>
<span class="dropdown__icon" aria-hidden="true"></span>
</div>
<div class="dropdown__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a turpis dapibus, dignissim dolor sit amet, rutrum eros. Mauris eget lobortis sem. Integer sed blandit sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel rhoncus diam. Morbi a rhoncus erat, quis tempus risus. Etiam vel pretium orci.</p>
</div>
</div>
<div class="dropdown">
<hr/>
<div class="dropdown__title js-slide-toggle" data-target=".dropdown__content">
<a href="#">Dropdown Title</a>
<span class="dropdown__icon" aria-hidden="true"></span>
</div>
<div class="dropdown__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a turpis dapibus, dignissim dolor sit amet, rutrum eros. Mauris eget lobortis sem. Integer sed blandit sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel rhoncus diam. Morbi a rhoncus erat, quis tempus risus. Etiam vel pretium orci.</p>
</div>
</div>
<br/>
<br/>