Question

Ok so I have multiple things happening here on one click but I’m wondering if there is a better way to format or do it?

<ul><li>Hello</li><li>Welcome</li><li>Howdy</li></ul>
<div class="first">Goodbye</div><div class="second">See ya</div><div class="third">Later Gator</div>

$('li:first-child').click(function(){
$('li:nth-child(2)').removeClass('this');
$('li:nth-child(3)').removeClass('this');
$('.second').hide();
$('.third').hide();
$('li:first-child').addClass('this');
$('.first').show(); });

Respectively, doing it this way I need the same process when the other’s are clicked.

jsfiddle

Answer 1

How about this?

$('li:first-child').click(function(){
    $(this).addClass('this').next().removeClass('this').next().removeClass('this');
    $('.second, .third').hide();
    $('.first').show(); 
});