J'essaie d'utiliser jquery ui (accordéon) dans un panneau AnythingSlider et ça ne marche pas - quelqu'un regarde?

Question

Je crée un site à partir de AnythingSlider et je veux utiliser la fonction d'accordéon de jQuery UI à l'intérieur d'un panneau et la page entière pue le lit. Toutes les références à js et css fonctionnent. Et maintenant pour les nouvelles ...

<script type="text/javascript"> 
    // Set up Sliders 
    // ************** 
    $(function(){ 
    $('#slider').anythingSlider({ 
    startPanel    : 1, 
    buildArrows  : false, 
    autoPlay    : false, 
    width     : 600, // if resizeContent is false, this is the default width if panel size is not defined 
    height     : 350, // if resizeContent is false, this is the default height if panel size is not defined 
    resizeContents  : false, // If true, solitary images/objects in the panel will expand to fit the viewport 
    startStopped   : true, // If autoPlay is on, this can force it to start stopped 
    navigationFormatter : function(index, panel){ // Format navigation labels with text 
    return ['home', 'menu', 'find us', 'order online', 'cater', 'contact'][index - 1]; 
    } 
    }); 

    $("#accordion").accordion({ header: "h3" }); 

    }); 
</script> 

Et dans le corps:

<li class="panel2"> 

    <div id="accordion"> 
    <div> 
    <h3><a href="#">First</a></h3> 
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    </div> 
    <div> 
    <h3><a href="#">Second</a></h3> 
    <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
    <h3><a href="#">Third</a></h3> 
    <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
    </div> 
    </li> 

Answer 1

Ce qui manque est une définition CSS pour définir la hauteur de votre panel2. Parce qu'au départ c'est juste une liste, la hauteur est beaucoup plus petite. Mais quand vous le convertissez en accordéon, la hauteur augmente. Je ne peux pas penser à une méthode plus facile, donc sans doute il est préférable de trouver la hauteur souhaitée:

.panel2 { height: 350px; } 

Voici un demo.

Notez également que si je mets resizeContents: true dans la démo, je n'ai pas besoin de ce bit de CSS ci-dessus.

Answer 2

Mon stupide, stupide mauvais. Ça marche. J'ai négligé d'ajouter quelque chose à la suite de copier et coller dans un nouveau document. Si vous êtes intéressé: http://bigsilkdesign.com/mercado/

Merci pour votre réponse. Pour cela, vous en obtenez un en haut. Pas comme si tu en avais besoin, mais crédit quand il le fallait.

Si rien d'autre, pour voir mon utilisation altérée de AnythingSlider ...