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> 

here page

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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -