CODEWITHSUNDEEP
jqueryjquery-ui
Longblog
Longblog

Reputation: 849

jQuery Accordion Icons Not Showing

I've never used the icon feature in jQuery before, but I assumed they would be part of the linked UI style sheet. Do I need to download the icon pack or something before they show up? Here's my project and everything is working, just no icons.

In the Header: 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

And in the footer:

<script>
  jQuery(function() {
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };
    jQuery( "#accordion" ).accordion({
      icons: icons,
      collapsible: true,
      active: false,
      heightStyle: "content"
    });
  });
</script>

And the actual html structure of the accordion elements: 

<div id="accordion">
  <h3>Header Text</h3>
  <div>
    <p>Words and stuff</p>
  </div>
  <h3>Oh hello, I'm the second header</h3>
  <div>
    <p>SO MANY WORDS!</p>
  </div>
</div>

Thanks.

Upvotes: 4

Views: 14252

Answers (1)

rorymorris
rorymorris

Reputation: 223

You need to include some CSS files by the looks of it.

I've created a fiddle with your code, including the CSS file, and everything works fine.

http://jsfiddle.net/MaWsm/

<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">

Upvotes: 7

Related Questions