javascript - How to put the icons in accordion in jquery ui -

javascript - How to put the icons in accordion in jquery ui -

i want show default icon in accordion in illustration in jquery-ui site.

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

my problem won't show text see... tried code in jsfiddle see in same position 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>

your code absolutely right , have add together little css css file

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

javascript jquery html css jquery-ui