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?

HTML Code:

    <!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/

Thread: How to to split jQuery UI accordion in 2 columns

Thread Tools

Search Thread

How to to split jQuery UI accordion in 2 columns

Bookmarks

Bookmarks

Posting Permissions