CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
user3746626
user3746626

Reputation: 63

How to put the icons in accordion in jquery ui

I want to do is show the default icon in accordion just like in the example in jQuery-ui site.

Example: http://jqueryui.com/accordion/#custom-icons

My problem is it won't show only the text I see... I tried my code in jsfiddle I see it but its in the same position as text.

Current output: http://jsfiddle.net/MfegM/1663/

Script:

$(function() {
      $( "#accordion" ).accordion({
      active:false,
      collapsible:true,
      });
});

$(function() {

$("#accordion").accordion( );

$("#accordion").accordion("option", "icons",

{'header': 'ui-icon-circle-arrow-e', 'headerSelected': 'ui-icon-circle-arrow-s' });
       });

My links:

<!--CSS Links-->
<link rel="shortcut icon" href="elogFiles/images/icon.ico" type="image/x-icon" />
<link rel="stylesheet" href="elogFiles/css/jquery-ui-1.9.2.css" />
<link rel="stylesheet" href="elogFiles/css/animate.css" />
<link rel="stylesheet" href="elogFiles/css/bootstrap.css" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="elogFiles/css/style.css" type="text/css" />


<!--Script Links-->
    <script src="elogFiles/js/jquery-1.11.0.min.js"></script>
    <script src="elogFiles/js/jquery-ui-1.9.2.min.js"></script>
    <script src="elogFiles/js/bootstrap.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
    <script src="elogFiles/js/myScript.js"></script>

Upvotes: 2

Views: 1424

Answers (2)

Dhaval Panchal
Dhaval Panchal

Reputation: 648

Your code is absolutely right , all you have to do is add this small CSS to your CSS file

.ui-accordion .ui-accordion-header{
   padding-left: 30px;
}

Upvotes: 1

caspian
caspian

Reputation: 1804

Try using a newer version of jquery and jquery ui. It works straight up on 1.8.3 and ui 1.9.2 with your code exaclty

// code is yours - I included it so I could post the fiddle below.    
$("#accordion").accordion("option", "icons",
{
    'header': 'ui-icon-circle-arrow-e',
    'headerSelected': 'ui-icon-circle-arrow-s'
});

EXAMPLE: http://jsfiddle.net/MfegM/1664/

Upvotes: 3

Related Questions