javascriptjqueryjquery-uiaccordion

make jquery ui accordion horizontal


I am using jquery ui accordion to view different data to user, it's working perfectly as described in jquery ui/demos, however what I want to achieve is to change the effect of the sliding effect such that instead of sliding up and down, i want to make it slide left and right (like image catalouges, visual design in this page http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1) so is it possible to do that? javascript:

$(function() {
                $("#accordion").accordion({autoHeight:false, collapsible: true, navigation: true,
                    clearStyle: true,
                    change: function(event, ui) {
                        resize_iframe();
                    }
                });
            });

code:

echo '<div id="accordion">';
        while ($r = mysql_fetch_assoc($get_role)) {
            $role = $r['role'];
            if ($role == 'author') {
                echo '<h3><a href="#">Author</a></h3>';
                echo "<div>";
                AuthorView($member_id, $conference_id, $start, $end, $today);
                echo "</div>";
            } else if ($role == 'organizer') {
                echo '<h3><a href="#">Organizer</a></h3>';
                echo "<div>";
                OrganizerView($conference_id, $end);
                echo "</div>";
            } else if ($role == 'reviewer') {
                echo '<h3><a href="#">Reviewer</a></h3>';
                echo "<div>";
                ReviewerView($member_id, $conference_id, $start, $end, $today);
                echo "</div>";
            }
        }
        echo "</div>";

Solution

  • Two working demos, whichever suits you for the cause: http://jsfiddle.net/g4NLf/

    Edit: new demo: http://jsfiddle.net/g4NLf/ or http://jsfiddle.net/g4NLf/show

    One uses a simple accordion, and another use a small lib for.

    http://nicolahibbert.com/demo/liteAccordion/

    HTML is in the demo link.

    Code

    $('.accordion').accordion({collapsible:true,active:false});
    

    or

    $(function(){
        $('#one').liteAccordion({
                            containerWidth:400,
                            autoPlay : true,
                            pauseOnHover : true,
                            theme : 'dark',
                            rounded : true,
                            enumerateSlides : true                    
                    })
        
    })
    

    Scripts:

    <script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>
    
    <link href="http://nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" rel="stylesheet" />