Hi,
I am working in asp.net 4.5 and here is the sample. I am creating accordion collapsible / expand functionality and two hurdles am facing.
1. I need to position the + image on the right hand side
2. I need to achieve the multi open by defualt funcionality. which means i need to open the first two accordions should be opened by default.
Please help me on achieving this.
Here is my working code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.defaultIcon
{
background-image: url(http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png) !important;
width: 25px;
height: 25px;
}
.selectedIcon
{
background-image: url(http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png) !important;
width: 25px;
height: 25px;
}
</style>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="products" style="width: 500px;">
<h3>
<a href="#">
Product 1
</a>
</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in tortor metus,
a aliquam dui. Mauris euismod lorem eget nulla semper semper. Vestibulum pretium
rhoncus cursus. Vestibulum rhoncus, magna sit amet fermentum fringilla, nunc nisl
pellentesque libero, nec commodo libero ipsum a tellus. Maecenas sed varius est.
Sed vel risus at nisi imperdiet sollicitudin eget ac orci. Duis ac tristique sem.
</p>
</div>
<h3>
<a href="#">
Product 2
</a>
</h3>
<div>
<p>
Aliquam pretium scelerisque nisl in malesuada. Proin dictum elementum rutrum. Etiam
eleifend massa id dui porta tincidunt. Integer sodales nisi nec ligula lacinia tincidunt
vel in purus. Mauris ultrices velit quis massa dignissim rhoncus. Proin posuere
convallis euismod. Vestibulum convallis sagittis arcu id faucibus.
</p>
</div>
<h3>
<a href="#">
Product 3
</a>
</h3>
<div>
<p>
Quisque quis magna id nibh laoreet condimentum a sed nisl. In hac habitasse platea
dictumst. Proin sem eros, dignissim sed consequat sit amet, interdum id ante. Ut
id nisi in ante fermentum accumsan vitae ut est. Morbi tellus enim, convallis ac
rutrum a, condimentum ut turpis. Proin sit amet pretium felis.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</form>
</body>
</html>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//initialize accordion
$("#products").accordion();
//set accordion header options
$("#products").accordion("option", "icons",
{ 'header': 'defaultIcon', 'headerSelected': 'selectedIcon' });
});
</script>
