Triggering event when anchor element is clicked

Question

I have a list like this:

<ul class="titles clearfix">

 <li class="opened">Billing Address</li>
 <li class="">Shipping Address</li>
 <li class="">Review Order</li>

</ul>

And a button:

<a href="#">Next</a>

How it's working:

The first list item is opened by default (it has a class of "opened") and if I click on "Shipping address" (only if I click) the class "opened" it's applied to the "Shipping address".

What I want to do is, when I click on next to open "Shipping address" and If I click again to open "Review Order".

Basically, what I need to do is when "next" is clicked to force clicking "Shipping address" for example.

How can I do this?

Answer 1

You can use addClass() and removeClass() to set the class as needed, and next() to get the following li element. Try this:

$('a').click(function(e) {
    e.preventDefault();    
    $('li.opened').removeClass('opened').next().addClass('opened');
});

If required, you would need to implement some logic to prevent the user going past the third li element.

Example fiddle

Answer 2

 var i = 2 ; var len = $("ul li").length; $('a').on('click', function(){ $("ul li.opened").removeClass('opened'); $("ul li:nth-child("+ i +")").addClass('opened'); console.log(i, len); if (i == len) { i = 1; }else{ i++; } }); 

 .opened{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <ul class="titles clearfix"> <li class="opened">Billing Address</li> <li class="">Shipping Address</li> <li class="">Review Order</li> </ul> <a href="#">Next</a>