JSFiddle - React, Tailwind, and code Playground

by rcravens

HTML

<ul>
  <li><a href='#' data-toggle='#one'>one</a></li>
  <li><a href='#' data-toggle='#two'>two</a></li>
  <li><a href='#' data-toggle='#three'>three</a></li>
</ul>
<div id='one' class='toggle'>Stuff for one</div>
<div id='two' class='toggle'>Stuff for two</div>
<div id='three' class='toggle'>Stuff for three</div>

CSS

ul{
  list-style:none;
}
ul li {
  display:inline;
  margin: 0 10px;
}

.toggle { 
  display:none;
  margin: 30px;
}

JavaScript

$(document).ready(function(){
  
  $('ul a').click(function(e){
    e.preventDefault();
    var id = $(this).data('toggle');
    $('.toggle:visible').slideToggle('slow', function(){
      $(id).slideToggle('slow');
    });
  });
  
  $($('.toggle')[0]).show();
});