Question

The jQuery plugin cycle looks for elements of class slideshow. I want to add this class to a <ul> element to make a slideshow out of its <li>s. But when I add the slideshow class to the <ul> element, all <li> disappear and I get no slideshow whatsoever.

The HTML looks like this:

<ul>
  <li>
    <h3 class="expander">...</h3>
    <div class="content">
      <p>...</p>
      <h4>...</h4>
      <ul class="slideshow">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
  ...
</ul>

As you see, the slideshow <ul> is included in another list. This parent list consists of headers which reveal the content of each list item on click. I am hiding all the .contents programmatically when the DOM is ready. Then, I add a click listener to the .expanders so they can show the hidden .contents.

It is inside these .contentss that I have .slideshows which use the cycle plugin to cycle through their list items.

The other weird thing about all this is that the slideshow’s worked perfectly before I transformed my headers into toggles for their associated content. Indeed, when I added the toggle functionality to the headers, the slides are no longer visible. But then if I take away the slideshow class, they are visible again. Of course, they no longer have slideshow functionnality…

Here is the javascript for all this:

$(document).ready(function()
{
  var expanders = $('.expander');
  expanders.each(function()
  {
    $('.content', $(this).parent()).toggle();
    $(this).click(function()
    {
      $('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
    });
  });
  $('.slideshow').each(function() {
    var parent = $(this).parent();
    $(this).cycle(
    {
      fx: 'scrollHorz',
      easing: 'easeInOutCirc',
      timeout: 0,
      nowrap: 1
    });
  });
});

Any idea what could be causing this problem?

Answer 1

Apparently, I needed to move the cycle code above the toggle code, like this:

$(document).ready(function()
{
  $('.slideshow').each(function() {
    var parent = $(this).parent();
    $(this).cycle(
    {
      fx: 'scrollHorz',
      easing: 'easeInOutCirc',
      timeout: 0,
      nowrap: 1
    });
  });
  var expanders = $('.expander');
  expanders.each(function()
  {
    $('.content', $(this).parent()).toggle();
    $(this).click(function()
    {
      $('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
    });
  });
});

I don’t know why this works though, so better answers would be appreciated.