Hide or Show if Current, jQuery -


i have 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 show <span> when li class current, , hide <span> when not current.

there js plugin change li class, when changes current, make <span> visible , when 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")     }  }; 

you need javascript toggling of classes, css can rest:

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

then, using justin808's example, you'd javascript:

function toggleindicator(liclass) {     $('.'+liclass).toggleclass('current'); }  $('#clickme').click(function() { toggleindicator('dl-nav-3');});  

forking justin808's jsfiddle, this: http://jsfiddle.net/uwtez/1/


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -