Multiple jQuery sliders on one page without repeating code

Question

I've researched many posts and I still did not find a solution, either all sliderboxes (a box which slideDown() on click) open simultaniously with $('[id^="sliderbox-"]') or I just simply dont understand how to apply the jquery code specifically to my slider.

This is my code:

$( "#open2" ).click(function () {
                if ( $( "#sliderbox2" ).is( ":hidden" ) ) {
                    $( "#sliderbox2" ).slideDown( "slow" );
                    $( ".arrow2").delay(300).fadeIn(500);
                    $(".balken2").delay(500).fadeIn(500);
                    $( "#sliderbox" ).slideUp( "slow" );
                    $( ".arrow" ).fadeOut(100);
                    $( ".balken" ).fadeOut(100);                
                    var y = $(window).scrollTop();  //your current y position on the page
                    $('html, body').animate({
                        scrollTop: y+150
                    },500);
                } else {
                    $( "#sliderbox2" ).slideUp( "slow" );
                    $( ".arrow2" ).fadeOut(100);
                    $( ".balken2" ).fadeOut(100);
                }
});

I guess you can already see the "2" cause this is the second sliderbox to be opened, there are also the arrows for the slider which fade in and a thick border in the button. I have 20 sliders, and i dont want to repeate css and jquery code 20 times!

This is the html:

<img src="images/pfeilunten2.png" class="pfeilunten" style="margin-left:0;" id="open3"/>
    <div id="sliderbox3" class="sliderbox">
            <div id="carousel">

                <div id="carousel_inner">
                <ul id="carousel_ul3" class="carousel_ul">
                <div id="zentriercarousel">
                    <li>...</li>
                </div>
                </ul>
                </div>
                <div class="scroll_left scroll">
                <a href="javascript:slide3('left');"> <img src="images/arrowleft.png" class="arrow3"  /> </a></div>
                <div class="scroll_right scroll">
                <a href="javascript:slide3('right');"> <img src="images/arrowright.png" class="arrow3" /> </a>
                </div>
                <input id="hidden_auto_slide_seconds" type="hidden" value="0" />
                <div class="balken3"></div>
            </div>
            </div>

Ans as you can see, there is already code for the third slider, and i have to rename EVERYTHING. That really sucks! Your help would be so much appreciated, please answer specific on this code, thanks in advance!

Answer 1

The way I would approach this is to give all the links that open a slider a class, say "open", I would give them all a data-slider property, something like this:

<a href="#" class="open" data-slider="2">Open Slider</a>

You jquery function can then become generic:

$( ".open" ).click(function () {
                 var sliderNumber = $(this).data("slider");
                 if ( $( "#sliderbox" + sliderNUmber ).is( ":hidden" ) ) {
                    $( "#sliderbox" + sliderNUmber ).slideDown( "slow" );
                    $( ".arrow" + sliderNUmber).delay(300).fadeIn(500);
                    $(".balken" + sliderNUmber).delay(500).fadeIn(500);
                    $( "#sliderbox" ).slideUp( "slow" );
                    $( ".arrow" ).fadeOut(100);
                    $( ".balken" ).fadeOut(100);                
                    var y = $(window).scrollTop();  //your current y position on the page
                    $('html, body').animate({
                        scrollTop: y+150
                    },500);
                } else {
                    $( "#sliderbox" + sliderNUmber ).slideUp( "slow" );
                    $( ".arrow" + sliderNUmber ).fadeOut(100);
                    $( ".balken" + sliderNUmber ).fadeOut(100);
                }
});

Now your slider function is more generic, and you can re-use it as many times as you want, just have to make sure you add the data-slider number to each link and make sure the sliding elements have the right IDs

Hope this helps.