Have accordions stopped working?

[jcole3]

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/>

[themidiman · Accepted solution]

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:

[jcole3]

Thanks so much for the UI widget, and the info on styles! It seems to be working for me without any issues. Any chance you can give me a little more help on how to add a little bit of space between the left side of the text and the border of the accordion?

[themidiman]

This seems to do the trick:

<div class="enhanceable_content accordion">
    <div>PUT TITLE FOR TAB HERE</div>
    <div style="padding-left: 20px;">
        <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 style="padding-left: 20px;">
        <h3>Content 2</h3>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. I
           nteger 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 style="padding-left: 20px;">
        <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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notice the style="padding-left: 20px;" inline CSS rule on each of the <div> tags. Adjust the number to your liking.

[jcole3]

Never mind! I figured it out from another post that you helped me out on!

<div style="margin-left: 10px;">
<h3>Content 1</h3>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</p>
</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[themidiman]

Yes, that would do it too. 

At this point it's unclear to me how long this built-in style will last if Instructure is moving away from jQueryUI in favor of React.JS

[james_umphres]

Are you seeing that this code still works for you? I am troubleshooting a broken accordion page and tried this with no luck. I even copied your example. Was there a recent update?

[themidiman]

This does not work anymore according to these other comments on the community:

https://community.canvaslms.com/docs/DOC-11515-canvas-beta-release-notes-2017-06-12#jive_content_id_... 

https://community.canvaslms.com/thread/14503-deprecated-use-of-magic-jqueryui-widget