Menu
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?
680
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.
88
How about this? (be sure to change "redmond" theme to fit your theme)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h3" });
});
</script>
<style type="text/css">
body { font: 62.5% "Trebuchet MS", sans-serif; margin: 50px; }
ul.icons { margin: 0; padding: 0;}
ul.icons li { margin: 2px; position: relative; padding: 2px 0; cursor: pointer; float: left; list-style: none;}
ul.icons span.ui-icon { float: left; margin: 0 4px;}
.acc-content { position:relative; }
.icon-group { position:absolute; top:0px; right:2px; z-index:9999; cursor:pointer;}
</style>
</head>
<body>
<div id="accordion">
<div class="acc-content">
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<ul class="icons icon-group ui-widget ui-helper-clearfix">
<li title="Complete"><span class="ui-icon ui-icon-check"></span></li>
<li title="Help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"></span></li>
</ul>
</div>
<div class="acc-content">
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div class="acc-content">
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
