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>";
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" />