cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Have accordions stopped working?

Jump to solution

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

Tags (1)
1 Solution

Accepted Solutions
Highlighted
Surveyor

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

7 Replies
Highlighted
Surveyor

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

Highlighted
Community Member

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?

Highlighted
Surveyor

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.

Highlighted
Community Member

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>‍‍‍‍‍‍‍‍‍‍‍
Highlighted
Surveyor

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

Highlighted
Community Member

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?