jquery - Trouble with show/hide JavaScript -
i going have expressionengine weblog place user designed content blocks in footer. but, it's going show 1 @ at time.
my html looks this:
<ul class="footernav"> <li class="first"><a class="active" href="#">get in touch</a></li> <li><a href="#">interested in joining?</a></li> <li><a href="#">feedback</a></li> <li><a href="#">link 4</a></li> </ul> <div class="copy gutters show"> <p>lorem ipsum</p> </div> <div class="copy gutters hide"> <p>lorem ipsum</p> </div> <div class="copy gutters hide"> <p>lorem ipsum</p> </div>
i want switch show class hide class depending on clicked link. not sure how can accomplish this. has flexible enough work n number of content blocks--because defined user in expressionengine.
i'm pretty brand new javascript appreciate insight, or solution how might accomplish this.
i think work structure:
// cycle through each link in our ul.footernav element $(".footernav a").each(function(i,o){ // attach click-logic each link $(this).click(function(e){ // prevent page bouncing, reloading, etc. e.preventdefault(); // add .active class this, remove other links $(this).addclass("active").closest("li").siblings("li").find("a").removeclass("active"); // show div having class .copy , same index clicked link // meaning, clicking second link show second div $("div.copy:eq("+i+")").show().siblings("div.copy").hide(); }); });
demo online: http://jsbin.com/ekecu
Comments
Post a Comment