Jquery Slider and Toggle

Question

I have a slide show located at staging.asla.org/sustainablesites/secondary.html that uses the easySlider plug-in plus also uses the jQuery Toggle function.

Currently when you navigate through the slide show the description stays either shown or hidden. I would like for the navigation of the slide show to control the toggle function in that when you click the next button if the description is shown I would like it to slide down and then slide back up when it got to the next slide.

Is this doable?

Thanks!

Answer 1

I haven't looked into this in great detail, but my feeling is that as the plugin is, no you can't.

You'll probably have to modify your plugin. But first, change your setup code to be something like this, passing your teaser as an option:

    var options = {
        teaser: $("#slider li .block")
    };

No to modify the plugin. This almost works, but can probably be written a little better.

    $("#slider").easySlider(options);

        $("a", "#" + options.nextId).click(function() {
            if (options.teaser) {
                options.teaser.slideToggle();
            }
            animate("next");
            if (t >= ts) $(this).fadeOut();
            $("a", "#" + options.prevId).fadeIn();
            if (options.teaser) {
                options.teaser.slideToggle();
            }
        });

You'll need to modify for the prevId handler as well.

Also, to make this better, put the following lines of code in a function:

            animate("next");
            if (t >= ts) $(this).fadeOut();
            $("a", "#" + options.prevId).fadeIn();
            if (options.teaser) {
                options.teaser.slideToggle();
            }

And call it from an anonymous function within the first slide toggle, something a bit like this:

            if (options.teaser) {
                options.teaser.slideToggle(function(){myNewFunc();});
            }
            else{
                myNewFunc();
            }

You may have to do something equivalent from the fadeOut()/ fadeIn()

Have a play see what you think.

Answer 2

You could try this... it's not that pretty, but it works. Add it inside your $(document).ready(function(){

$("#nextBtn,#prevBtn").live('click',function(){
 if ($('.block').css('display') != 'none') {
  $(".block").slideToggle().slideToggle();   
 }
})

Instead of that if statement.. it might be cleaner to use:

if ($('.block').is(':visible')) {...}