PDA

View Full Version : How to to split jQuery UI accordion in 2 columns



young_coder
03-26-2012, 11:12 PM
I would like to split jQuery UI accordion in 2 columns but I cannot figure out how to do that. When I put

div style="float:left; width:50%;"

accordion donít work properly any more. I have been customized this demo http://jqueryui.com/demos/accordion/collapsible.html

Can somebody help me please?



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<script src="jquery-1.7.1.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.accordion.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
animated: false,
active: false,
autoHeight: false
});
});
</script>
</head>

<body>
<div class="demo">
<div id="accordion">

<div style="float:left; width:50%;">
<li><a href="#">TITLE 1</a>
<p>TEXT 1</p></li>

<li><a href="#">TITLE 2</a>
<p>TEXT 2</p></li>
</div>

<div style="float:left; width:50%;">
<li><a href="#">TITLE 3</a>
<p>TEXT 3</p></li>

<li><a href="#">TITLE 4</a>
<p>TEXT 4</p></li>
</div>

</div><!-- End accordion -->
</div><!-- End demo -->

</body>
</html>

young_coder
03-27-2012, 10:19 AM
Never mind, found a good tutorial here
http://css-tricks.com/grid-accordion-with-jquery/