Jai Jai - 6 months ago 123
jQuery Question

Jquery ui accordion - how to add an icon to the right?

whats the css/added html to add one of the jquery ui icons to the right side of the accordation widget's headers?

for example, if i have the html:

<!-- Accordion -->
<div id="accordion">
<div>
<h3><a href="#"><span class="title">Content</span><span class="ui-icon ui-icon-newwin"></span></a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>


can i add css to make the jquery ui icon appear on the right?

Jai Jai
Answer

I think i've figured this out. By adding this css it seems to work fine.

#accordion a span.title {
    float: left;
    display: block;
    margin-right: 10px;
    margin-top: 5px;
}

#accordion a span.ui-icon {
    position: static;   
    height: 20px;
    margin-top: 0px; 
    margin-top: 3px;
}

Let me know if any issues are found with this.

Comments