Question

I have created this code in Jquery.

And it is working fine but I am trying to accomplish this: I DON’T want to add a CLASS right away (on document load) like in this example INSTEAD I would try to accomplish the following:

ON FIRST click select FIRST li tag and THEN add Class “active”. I want to achieve the same functionality like in this Fiddle . (Only difference is that I DON’T want first li tag to have CLASS right away , but to add a CLASS on button click.) Can someone help me out? Thank you!!

$(document).ready(function() {
    $('ul li:first').addClass('active');
    $("button").click(function() {
        $('.active').removeClass('active').next('li').addClass('active')

    });
});

Answer 1

$(document).ready(function() {

    $("button").click(function() {
       if($('ul li.active').length==0)
           $('ul li:first-child').addClass('active');
       else
        $('.active').removeClass('active').next('li').addClass('active')

   });
});

try here http://jsfiddle.net/KVLE6/2/

In that case you need to check if there is any item with active class. If there is at least one, then remove to it and add it to next. If there is none, then add it to first. Let me know if that’s what you wanted