CODEWITHSUNDEEP
javascriptjqueryhtml
Nick Law
Nick Law

Reputation: 1748

simple jquery slider menu

I am trying to achieve a simple menu slider that works like this:

$(document).ready(function()    {

    // hide slider images on page load \\
    $('.sImage1, .sImage2,.sImage3, .sImage4').hide();

    // slide sImage1 on page load\\
    $('.sImage1').delay(500).slideDown(1000);
    // provide slider image click functionallity \\
    $('.sOpen1').click(function()   {
        // close any already open images \\
        $('.sImage2, .sImage3, .sImage4').slideUp(500);
        // open/close sImage1 \\
        $('.sImage1').stop().slideToggle(500);          
    }); //end click 1


    $('.sOpen2').click(function()   {
        $('.sImage1, .sImage3, .sImage4').slideUp(500);
        $('.sImage2').stop().slideToggle(500);          
    }); //end click 2
    $('.sOpen3').click(function()   {   
        $('.sImage1, .sImage2, .sImage4').slideUp(500);
        $('.sImage3').stop().slideToggle(500);          
    }); //end click 3
    $('.sOpen4').click(function()   {
        $('.sImage1, .sImage2, .sImage3').slideUp(500);
        $('.sImage4').stop().slideToggle(500);          
    }); //end click 4
}); // end ready

html:

 <div id="menuSlider">
    <ul>            
        <li class="sOpen1">Course Information</li>
        <li class="sImage1"><img src="#" /></li>
        <li class="sOpen2">Membership</li>
        <li class="sImage2"><img src="#" /></li>
        <li class="sOpen3">Equipment</li>
        <li class="sImage3"><img src="#" /></li>
        <li class="sOpen4">Golf Lessons</li>
        <li class="sImage4"><img src="#" /></li>
    </ul>
</div>

At the moment I only have 4 images to display but it could become 10 or more and so im guessing there is an easier way of achieving the same without so many lines of code?

I'm still learning javascript and jquery, but if some could point me in the direction of a good tutorial on how to achieve the same using an array or similar, it would be much appreciated.

Upvotes: 0

Views: 441

Answers (3)

Janez Lukan
Janez Lukan

Reputation: 1449

Perhaps even easier would be, if you simply use jQuery's UI Accordion.

Then you could have simply:

$(function () {
    $("#menuSlider").accordion();
});

and then (using h and div tags):

<div id="menuSlider">
    <h3>Course Information</h3>
    <div>
        <img src="#" />
    </div>
    <h3>Membership</h3>
    <div>
        <img src="#" />
    </div>
    <h3>Equipment</h3>
    <div>
        <img src="#" />
    </div>
    <h3>Golf Lessons</h3>
    <div>
        <img src="#" />
    </div>
</div>

Upvotes: 0

PSL
PSL

Reputation: 123739

You could reduce this to :

$(document).ready(function()    {

    $('.sImage').hide();  
    $('.sImage:first').delay(500).slideDown(1000); //slide down the first image
    $('.sOpen').click(function()   {  //register the handler for .sOpen as a common click event
        $('.sImage')
               .not(
                      $(this).next().slideToggle(500) //SlideUp other images except the one next to the clicked element which will be slideToggled
               ).slideUp(500);
    }); 
    
});

changing your markup: (Remove the indexes on the classes for the trigger as well as the content li elements)

<div id="menuSlider">
    <ul>            
        <li class="sOpen">Course Information</li>
        <li class="sImage"><img src="#" /></li>
        <li class="sOpen">Membership</li>
        <li class="sImage"><img src="#" /></li>
        <li class="sOpen">Equipment</li>
        <li class="sImage"><img src="#" /></li>
        <li class="sOpen">Golf Lessons</li>
        <li class="sImage"><img src="#" /></li>
    </ul>
</div>

With this you can add as many number of new items without changing/adding new classnames, handlers etc.

Demo

See

Upvotes: 1

Michael Chambers
Michael Chambers

Reputation: 74

try looking here:

www.w3schools.com/jquery/jquery_animate.asp

www.w3schools.com/css3/css3_animations.asp

Upvotes: 0

Related Questions