toggle 2 elements

by John Doe

HTML

<a href="javascript:void(0)" class="first active">first</a>
<a href="javascript:void(0)" class="second">second</a>
<div class="first_div">
 First
</div>
<div class="second_div">
 Second
</div>

CSS

*{
  box-sizing: border-box;
}
body{
  background-color: #20262e;
  padding: 15px;
  font-size: 12px;
  font-family: arial;
}
a{
  display: inline-block;
  padding: 15px 30px;
  background-color: #03a9f4;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
  text-transform: uppercase;
  font-size: 12px;
  font-family: arial;
  color: #fff;
  text-decoration: none;
  float: left;
}
a:first-of-type{
  border-top-left-radius: 5px; 
}
a:last-of-type{
  border-top-right-radius: 5px; 
}
div{
  clear: both;
  width: 100%;
  background-color: rgba(3, 169, 244, 0.61);
  color: #fff;
  padding: 15px;
  margin-top: 15px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
  font-size: 14px;
}
.second_div{
  display: none;
}

JavaScript

var slideToggleElements= function(a,b,c,d){
  $(a).on('click', function(e) {
    console.log('click');
    e.preventDefault();
    console.log('a: ' + a + ' b: ' + b + ' c: ' + c );
    if( $(a).hasClass('active') )
    {
      $(a).removeClass('active');
      $(b).slideUp();
    }
    else
    {
      $(c).removeClass('active');
      $(d).slideUp(function() {
        $(b).slideDown();
        $(a).addClass('active');
      });
    }
  });
}
slideToggleElements('.first','.first_div','.second','.second_div');
slideToggleElements('.second','.second_div','.first','.first_div');