JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="dropdown" id="one">1</div>
    <div class="dropdown" id="two">2</div>
    <div class="dropdown" id="three">3</div>

    <div class="press" rel="one">1 red<a href="#one"></a></div> 
    <div class="press" rel="two">2 green<a href="#two"></a></div>
    <div class="press" rel="three">3 blue<a href="#three"></a></div>
</div>

CSS

#wrapper{
    width:800px;
    border:solid thin #000;
    position:relative;
    padding:33px;
}
#wrapper .dropdown {
    width:734px;
    height:400px;
    border:solid thin #100;
    display:none;
}
#one   { background:#a00; }
#two   { background:#0a0; }
#three { background:#00a; }
#wrapper .press {
    display:inline-block;
    width:100px;
    height:100px;
    border:solid thick #000;
    margin:33px 33px 0 33px;
}

JavaScript

//rough multi slide. will shake elements below dropdowns
var prev = null;
function toggleDiv(e) {
  var divToToggle = $( $(this).find("a").attr('href') );
  if (prev && (!prev.is($(this)))) { //switch
    var prevDiv = $( prev.find("a").attr('href') );
    var divs = divToToggle.add(prevDiv); //add prevDiv into collection
    divs.slideToggle("slow"); //slideToggle all in collection
    prev = $(this);
  } else { //show/hide
    prev = divToToggle[0].style.display == 'block' ? null : $(this);
    divToToggle.slideToggle("slow");
  }
  return false;
//  e.preventDefault();
}

$('#document').ready(function() {
  $(".press").click(toggleDiv);
});