Remove a toggle class when clicking another toggle link

Question

I am making a tumblr theme and have managed to have 3 toggle links. They are working fine but I was wondering if it were possible to make it so the if the first toggle link is open, and i click on a second toggle link, the first one will close, instead of just 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 is the page

It should also be noted that I am not very good with js/ jquery

Answer 1

Yup. Use it this 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> 

Answer 2

I'd avoid code repetition adding a data-section referencing the id of the section you want to slide, otherwise youll be repeating yourself every time you want a new one.

So in your links:

<li><a href="#" class="changer" data-section="#mail"><i class="fa fa-envelope fa-fw"></i> Mail</a></li>
<li><a href="#" class="changer" data-section="#links"><i class="fa fa-link fa-fw"></i> Links</a></li>
<li><a href="#" class="changer" data-section="#blogroll"><i class="fa fa-th fa-fw"></i> Blogroll</a></li>

And your sections would look like:

<div id="blogroll">blogroll</div>

Finally your jquery code would look like:

$(document).ready(function() {
  $(".changer").click(function() {

    var sectionToChange = $(this).data('section');

    $(".change_it:not("+sectionToChange+")").removeClass('change_it');

    $(sectionToChange).toggleClass("change_it");
  });
});

Thus avoiding the need to go back to it every time you create a new slidable section.

Update: A demonstration of the concept

 $(document).ready(function() { $(".changer").click(function() { var sectionToChange = $(this).data('section'); $(".change_it:not("+sectionToChange+")").removeClass('change_it'); $(sectionToChange).toggleClass("change_it"); }); }); 

 * { 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/2.1.1/jquery.min.js"></script> <ul class="tabs"> <li><a href="#" class="changer" data-section="#mail"><i class="fa fa-envelope fa-fw"></i> Mail</a> </li> <li><a href="#" class="changer" data-section="#links"><i class="fa fa-link fa-fw"></i> Links</a> </li> <li><a href="#" class="changer" data-section="#blogroll"><i class="fa fa-th fa-fw"></i> Blogroll</a> </li> <li><a href="#" class="changer" data-section="#contacts"><i class="fa fa-th fa-fw"></i> Contacts</a> </li> <li><a href="#" class="changer" data-section="#wiki"><i class="fa fa-th fa-fw"></i> Wiki</a> </li> <li><a href="#" class="changer" data-section="#about"><i class="fa fa-th fa-fw"></i> About</a> </li> </ul> <div id="mail">Mail</div> <div id="links">Links</div> <div id="blogroll">Blogroll</div> <div id="contacts">Contacts</div> <div id="wiki">Wiki</div> <div id="about">About</div>