javascript - Remove a toggle class when clicking another toggle link -
i making tumblr theme , have managed have 3 toggle links. working fine wondering if possible make if first toggle link open, , click on second toggle link, first 1 close, instead of stacking up?
relevant code:
script:
$(document).ready(function(){ $(".changer").click(function(){ $(".slidey").toggleclass("change_it"); }); $(".changer2").click(function(){ $(".slidey2").toggleclass("change_it"); }); $(".changer3").click(function(){ $(".slidey3").toggleclass("change_it"); }); });
html
<li><a href="#" class="changer"><i class="fa fa-envelope fa-fw"></i> mail</a></li> <li><a href="#" class="changer2"><i class="fa fa-link fa-fw"></i> links</a></li> <li><a href="#" class="changer3"><i class="fa fa-th fa-fw"></i> blogroll</a></li> <div class="slidey"> yo yo </div> <div class="slidey2"> linkies </div> <div class="slidey3"> blogroll </div>
it should noted not js/ jquery
yup. use way:
$(document).ready(function(){ $(".changer").click(function(){ if ($(".slidey" + $(this).data("slidey")).hasclass("change_it")) { $(".slidey" + $(this).data("slidey")).removeclass("change_it"); return false; } $(".slidey1, .slidey2, .slidey3").removeclass("change_it"); $(".slidey" + $(this).data("slidey")).addclass("change_it"); return false; }); });
* {font-family: 'segoe ui', sans-serif; text-decoration: none;} .change_it {font-weight: bold;} .tabs, .tabs li {display: inline-block; margin: 0; padding: 0; list-style: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="tabs"> <li><a href="#" class="changer" data-slidey="1"><i class="fa fa-envelope fa-fw"></i> mail</a></li> <li><a href="#" class="changer" data-slidey="2"><i class="fa fa-link fa-fw"></i> links</a></li> <li><a href="#" class="changer" data-slidey="3"><i class="fa fa-th fa-fw"></i> blogroll</a></li> </ul> <div class="slidey1">slidey 1</div> <div class="slidey2">slidey 2</div> <div class="slidey3">slidey 3</div>
Comments
Post a Comment