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

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">
<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>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
animated: false,
active: false,
autoHeight: false

<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 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><!-- End accordion -->
</div><!-- End demo -->


03-27-2012, 10:19 AM
Never mind, found a good tutorial here