Question

I have this list:

<ul class="pagination">
    <li class="dl-nav-1 current"><a href="#">Spring Training 2001</a><span class="visible"><img src="img/indicator.png" alt="" /></li>
    <li class="dl-nav-2"><a href="#">NFL 2011</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li>
    <li class="dl-nav-3"><a href="#">Fantasy Baseball</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li>
</ul>

I need to show the <span> when the li class is current, and hide the <span> when it is not current.

There is a JS plugin that will change the li class, so when it changes to current, make <span> visible and when it removes current, hide <span>

terrible attempt:

$(function) () {
    if($(ul.pagination li).hasClass("current")) {
        $("ul.pagination li.current span").removeClass("visible").addClass("hidden");
    } 
    else{
        $("ul.pagination li.current span").removeClass("hidden").addClass("visible")
    }

};

Answer 1

You only need javascript to do the toggling of classes, CSS can do the rest:

ul.pagination li.current span {
    display:inline;
}

ul.pagination li span {
    display:none;   
}

Then, using Justin808’s example, you’d do something like this for the javascript:

function ToggleIndicator(liClass) {
    $('.'+liClass).toggleClass('current');
}

$('#clickme').click(function() { ToggleIndicator('dl-nav-3');}); 

Forking Justin808’s jsfiddle, you get this: http://jsfiddle.net/uwTEZ/1/