Jquery Cycle question

JavaScript
1

I have a Jquery Cycle question I’m hoping someone can help me with.

Consider this:

<div id=“slides”>
<div class=“a”>content and images</div>
<div class=“a”>content and images</div>
<div class=“a”>content and images</div>
<div class=“b”>content and images</div>
<div class=“b”>content and images</div>
<div class=“b”>content and images</div>
</div>

<a href=“#”>Reveal A and hide B</a>
<a href=“#”>Reveal B and hide A</a>

If they click ‘A’ then the divs with class ‘a’ cycle, while class ‘b’ don’t feature. If they click ‘B’ then the divs with class ‘b’ feature and the ‘a’ don’t feature.

Sounds fairly simple, right? Except when I toggle between the two classes jQuery Cycle doesn’t like it the slides get messed up.

I have tried various code iterations, none of which are that helpful so I won’t include them.

If somebody could assist me, that would be much appreciated.

Thanks!

2

It’s always useful to let us know what you have tried, so we don’t spend time going over the same things.

Have you tried creating two separate sets of slides, and hiding/showing the containers rather than the individual slides?


<div id="a-slides">
    <div class="a">content and images</div>
    <div class="a">content and images</div>
    <div class="a">content and images</div>
</div>
<div id="b-slides">
    <div class="b">content and images</div>
    <div class="b">content and images</div>
    <div class="b">content and images</div>
</div>

<a href="#">Reveal A and hide B</a>
<a href="#">Reveal B and hide A</a>
3

I could try that - the only thing is each of the slide containers need to reside in the same place. Basically it’s a portfolio and each link reveals a specific project. I guess if #a-slides and #b-slides were positioned ‘absolutely’ that might work? I’ll give it a go, thanks!

For some reason I thought it might be more economical to have one cycle() and just remove/add the divs as one clicks them…?