JQuery fadeIn one, fadeOut multiple divs

Question

I have a function like this:

$(document).ready(function(){
  $("#showt").click(function(){
    $(".t").fadeIn("fast");
  });
  $("#showt").click(function(){
    $(".m").fadeOut(0);
  });
  $("#showt").click(function(){
    $(".a").fadeOut(0);
  });
});

$(document).ready(function(){
  $("#showm").click(function(){
    $(".m").fadeIn("fast");
  });
  $("#showm").click(function(){
    $(".t").fadeOut(0);
  });
  $("#showm").click(function(){
    $(".a").fadeOut(0);
  });
});

$(document).ready(function(){
  $("#showa").click(function(){
    $(".a").fadeIn("fast");
  });
  $("#showa").click(function(){
    $(".t").fadeOut(0);
  });
  $("#showa").click(function(){
    $(".m").fadeOut(0);
  });
});

So on a click of a link with a certain ID it shows one, but hides other blocks, everything works perfectly but I'm just interested is there a way to reduce the function's code?

Thank you.

HTML:

<a href="#" class="tag" id="showt">ttt</a>
<a href="#" class="tag" id="showm">mmm</a> 
<a href="#" class="tag" id="showa">aaa</a>          

<div class="row">
  <div class="col-1"></div>
  <div class="col-2">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-3">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-4"></div>

Answer 1

You can considerably consolidate your code by using custom attributes; I chose the name show-class to denote the class the link wants to show. If you plan to add more classes than just .t, .m, and .a you could add a secondary class that all of them (.t, .m, .a) have in common, and fade that out. Additionally, you can use the .hide() function to make your code a little simpler (rather than .fadeOut(0)).

$(document).ready(function(){
  $(".showStuff").click(function (){
    $(".t, .m, .a").hide();
    $("." + $(this).attr("show-class")).fadeIn("fast");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="tag showStuff" show-class="t">ttt</a>
<a href="#" class="tag showStuff" show-class="m">mmm</a> 
<a href="#" class="tag showStuff" show-class="a">aaa</a>          

<div class="row">
  <div class="col-1"></div>
  <div class="col-2">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-3">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-4"></div>