[ARCHIVED] Changing the color of an accordian

[kate_miller]

Does anyone know if you can change the color of an accordion? I have this code (see below) and it looks great, but if I wanted to change the color of the boxes that house the accordion, how would I do that?

<div class="enhanceable_content accordion">

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

  <div style="padding: 15px;">

      <p>Section 1 Content</p>

  </div>

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

  <div style="padding: 15px;">

      <p>Section 2 Content</p>

  </div>

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

  <div style="padding: 15px;">

      <p>Section 3 Content</p>

      <ul>

          <li>List item one</li>

          <li>List item two</li>

          <li>List item three</li>

      </ul>

  </div>

</div>

[skotcherlakota]

Try giving color to the h3 tag or the div style tag. I tried this:

<div class="enhanceable_content accordion">

<h3 style="background-color: #129dbf;">Section 1</h3>

<div style="background-color: #dcdddf; padding: 15px;">

<p>Section 1 Content</p>

</div>

<h3 style="background-color: #129dbf;">Section 2</h3>

<div style="background-color: #dcdddf; padding: 15px;">

<p>Section 2 Content</p>

</div>

<h3 style="background-color: #129dbf;">Section 3</h3>

<div style="background-color: #dcdddf; padding: 15px;">

<p>Section 3 Content</p>

<ul>

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ul>

</div>

</div>

[d18089h]

I've noticed that, for pages using the jQueryUI tools like .accordion, Instructure has put the warning reproduced below in the browser console.  So, it sounds like those of us using these existing tricks will need to create our own javascript at some unknown point in the future.

Console Warning When Using .accordion, .tabs, etc.

Deprecated use of magic jQueryUI widget markup detected:

You're relying on undocumented functionality where Canvas makes jQueryUI widgets out of rich content that has the following class names: .dialog, .draggable, .resizable, .sortable, .accordion, .tabs.

Canvas is moving away from jQueryUI for our own widgets and this behavior will go away. Rather than relying on the internals of Canvas's JavaScript, you should use your own custom JS file to do any such customizations.

[Robbie_Grant]

 @kate_miller ,

We are giving the Instructional Designers area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie