Have accordions stopped working?

Question

I am building out a new content page, and was using the style guide's example code for the mini-accordion, but it just displays the sections as links with content listed below (see image). Here is what I pulled from the style guides:

Section 1

Content for Section 1

Section 2

Content for Section 2

Section 3

Content for Section 3

Screen Shot 2017-05-25 at 9.45.07 AM.png

themidiman · Accepted Answer

I don't know of the longevity of the styles as I've seen messages on the community that Instructure is moving away from jQueryUI. Nevertheless, on Canvas Commons some code was shared for an accordion UI widget. I've confirmed that this code still works: <div class="enhanceable_content accordion">
<div>PUT TITLE FOR TAB HEREdiv>
<div>
<h3>Content 1h3>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet,
nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.
Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.p>
div>
<div>PUT TITLE FOR TAB HEREdiv>
<div>
<h3>Content 2h3>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum
sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.
Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.p>
div>
<div>PUT TITLE FOR TAB HEREdiv>
<div>
<h3>Content 3h3>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.
Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.
Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.p>
div>
div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ This renders as follows: