JQuery UI Icons not showing on my accordion?
I am new to Jquery UI and CSS, and I am trying to make a very simple
accordion. So the accordion works fine however it doesn't show the icons
at all and I can't figure out why it wont show the icons, I have confirmed
that the graphics are at the url so I know the graphics exist there and I
have been able to use the graphics for other sites without any trouble.
The trouble statred when I started adding Jquery UI into the page. I
changed the code I posted to .../filename.ext so as not to reveal the
company info of who I work for or the site I am working on. Any
suggestions or help anyone could provide would be greatly appreciated.
HTML/JS
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href=".../jquery.ui.all.css">
<script src=".../jquery-1.9.1.js"></script>
<script src=".../jquery-ui.js"></script>
<script src=".../jquery.ui.core.js"></script>
<script src=".../jquery.ui.widget.js"></script>
<script src=".../jquery.ui.accordion.js"></script>
<script src=".../jquery.ui.button.js"></script>
<link rel="stylesheet" href=".../demos.css">
<link rel="stylesheet" href=".../icon.css">
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true, active: false, icons: { header: "iconPlus",
activeHeader: "iconMinus" }
});
var active = $( "#accordion" ).accordion( "option", "active" );
$( "#accordion" ).accordion( "option", "active", false );
$( "#accordion" ).accordion( "option", "icons", { header: "iconPlus",
activeHeader: "iconMinus" });
});
</script>
</head>
<body>
<div id="accordion" style="background-color:#D0E1FF;color:#CC0000;">
<h3 style="background-color:#5555FF;color:#00CC00;"><a href="#">Map
Tools</a></h3>
<div style="text-align: center">
<a href="http://maps.google.com/" target="_blank"><img
src=".../GoogleMaps2.jpg" border="0" alt="" style="text-align: center;
border-bottom: 0px; border-left: 0px; padding- bottom: 0px; margin-top:
0px; padding-left: 0px; width: 100px; padding-right: 0px;
margin-bottom: 0px; height: 75px; border-top: 0px; border-right: 0px;
padding-top: 0px"/></a>
<a href="http://www.bing.com/maps" target="_blank"><img
src=".../BingMaps.jpg" border="0" alt="" style="border-bottom: 0px;
border-left: 0px; padding-bottom: 0px; padding-left: 0px; width: 100px;
padding-right: 0px; height: 75px; font-size: 10pt; border-top: 0px;
border-right: 0px; padding-top: 0px"/></a>
<a href=".../Map.aspx" target="_blank"><img src=".../Map.JPG" border="0"
alt="" style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px;
padding-left: 0px; width: 100px; padding-right: 0px; height: 75px;
font-size: 10pt; border-top: 0px; border-right: 0px; padding-top:
0px"/></a> 
</div>
<h3 style="background-color:#55FF55;color:#0000CC;">Reference Tools</h3>
<div>
<p>References...</p>
</div>
<h3 style="background-color:#FF5555;color:#0000CC;">Agent Tools</h3>
<div>
<p>Tools like vacation calendar, schedule viewer, etc...</p>
</div>
<h3 style="background-color:#FFFFFF;color:CC0000;">Organizational Tools</h3>
<div>
<p>ORG Charts, Account and Network managers, etc...</p>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
.iconPlus
{
background:url(.../BluePlus.png) !important;
background-size:20px !important;
width:20px;
height:20px;
}
.iconMinus
{
background:url(.../BlueMinus.png) !important;
background-size:20px !important;
width:20px;
height:20px;
}
</style>
No comments:
Post a Comment