I am trying to use jquery ui (accordion) inside the AnythingSlider panel and it does not work - is someone watching?

Question

I create a site from AnythingSlider and want to use the jQuery UI accordion function inside the panel, and the whole page aligns the bed. All links to js and css work. And now for the news ...

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

And in the body:

<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

What is missing is the CSS definition for setting the height of the panel. Because initially it is just a list, the height is much less. But when you turn it into an accordion, the height rises. I can't come up with a simpler method, so it's probably best to figure out the height you want:

.panel2 { height: 350px; }

Here is a demon.

, resizeContents: true , CSS .

Answer 2

, . . - . : http://bigsilkdesign.com/mercado/

, , . . , , , .

, AnythingSlider...