Have accordions stopped working?

Jump to solution
jcole3
Community Contributor

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:

 

<div class="accordion ui-accordion--mini" id="styleguide_demo_accordion2">

  <h3><a href="#">Section 1</a></h3>

  <div>

    <div class="styleguide-section__accordion-demo-element">

      Content for Section 1

    </div>

  </div>

 

  <h3><a href="#">Section 2</a></h3>

  <div>

    <div class="styleguide-section__accordion-demo-element">

      Content for Section 2

    </div>

  </div>

 

  <h3><a href="#">Section 3</a></h3>

  <div>

    <div class="styleguide-section__accordion-demo-element">

      Content for Section 3

    </div>

  </div>

 

</div>

<br/>

1 Solution
themidiman
Community Champion

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 HERE</div>
<div>
<h3>Content 1</h3>
<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 HERE</div>
<div>
<h3>Content 2</h3>
<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 HERE</div>
<div>
<h3>Content 3</h3>
<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:

screenshot of accordion UI widget

View solution in original post