faire jquery ui accordéon horizontal

Question

J'utilise l'accordéon jquery ui pour afficher des données différentes à l'utilisateur, cela fonctionne parfaitement comme décrit dans jquery ui/démos, mais ce que je veux atteindre est de changer l'effet de l'effet de glissement de telle sorte que la place de glisser vers le haut et vers le bas, je veux le faire glisser à gauche et à droite (comme les images catalouges, design visuel dans cette page http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1) donc est-ce possible de faire ça? 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>"; 

Answer 1

Hiya 2 démos de travail qui jamais vous convient pour la cause: http://jsfiddle.net/g4NLf/

- EDIT-5ème Septembre:nouveau demo:http://jsfiddle.net/g4NLf/ouhttp://jsfiddle.net/g4NLf/show

un accordéon simple et porte plainte contre une autre utilisation d'un petit lib.

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

Hope this vous aide! :)

HTML est dans le lien de démonstration mais vous voulez que je peux le coller dans ce poste; Aussi s'il vous plaît lemme savoir si cela vous aide!

Code

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

ou

$(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" /> 
​ 

Answer 2

Vérifiez la full page demo here on Codepen.

var space = ($(window).width() - 100); 
 
$('.column').width(space/4); 
 

 
$(".column").click(function(){ 
 
\t if (!$(this).hasClass('animated')) { 
 
\t \t $('.column').not($(this).parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'},1750,'easeInOutQuint', function() { 
 
     
 
    }); 
 
\t } 
 
    
 
    $(this).addClass('animated'); 
 
    \t $('.column').not($(this,'.reveal').parent()).dequeue().stop().animate({width: 'toggle', opacity: '0.75'},1750,'easeInOutQuint', function() { 
 
     
 
\t }); 
 
    $(this).dequeue().stop().animate({ 
 
     width:(space/4) 
 
    },1400,'easeInOutQuint',function(){ 
 
     $(this).html('AGAIN'); 
 
    }); 
 
    $('.reveal').dequeue().stop().animate({ 
 
     width:'75vw' 
 
    },1400,'easeInOutQuint',function(){ 
 
    }); 
 
});

body { overflow:hidden;max-width:100vw; } 
 
header { position:absolute;left:0;top:0;width:200px;height:100vh;color:#ffffff;font-size:2em;} 
 
.columns { position:absolute;left:100px;top:0;height:100vh;background:green;width:100%;} 
 
.column { height:100vh;float:left;color:#ffffff;font-size:2em;text-align:center;display:block;opacity:0.75;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} 
 
.reveal { background:rgba(0,0,0,0.5);height:100vh;-webkit-transition: all 2s; 
 
    -moz-transition: all 2s; 
 
    -o-transition: all 2s; 
 
    transition: all 2s linear;left:200px;color:#ffffff; }

<div class="container"> 
 
    
 
    <header style="background:#333333;"> 
 
    
 
    </header> 
 
    
 
    <div class="columns" style="background-image:url('http://placekitten.com/800/300');background-size:cover;background-repeat:no-repeat;background-position:center top;"> 
 
    
 
    <div class="column" style="background:blue;">DOUBLE<br>CLICK</div> 
 
    <div class="column" style="background:green;">ANY<br>OF</div> 
 
    <div class="column" style="background:orange;">THESE COLUMNS</div> 
 
    <div class="column" style="background:pink;">TO REVEAL</div> 
 
    <div class="column reveal">THIS</div> 
 
    </div> 
 
</div>