JSFiddle - React, Tailwind, and code Playground

by richlewis14

HTML

<div class="filter clearfix">
  <nav>
   <ul class="filter_nav">
    <li>
     <a class="toggler" data-slider="slideOne">Inspiration</a>
    </li>
    <li>
     <a class="toggler" data-slider="slideTwo">News</a>
    </li>
   </ul>
  </nav>
</div>
<!-- filter -->
<div class="slider" id="slideOne">
  <div class="wrap clearfix">
    <ul class="slider_list">
      <li>Inspiration Content</li>
    </ul>
    <span class="closeSlider">Close</span>
  </div>
</div>
<div class="slider" id="slideTwo">
    <div class="wrap clearfix">
        <ul class="slider_list">
            <li>News Content</li>
        </ul>
        <span class="closeSlider">Close</span>
    </div>
</div>

CSS

.wrap {
    width: 200px;
    margin:0 auto;
}

.filter a {
    display: inline-block;
    float:left;
}
.label {
    float:left;
    font-style: italic;
    margin-right: 2em;
}
.filter_nav {
    float:left;
    margin: 0;
}
.filter_nav li {
    float: left;
    display: inline-block;
    margin-right: 1em;
}
.filter_nav a {
    color: #000000;
    text-transform: uppercase;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
.slider_list {
    margin: 0;
}
.slider_list li {
    float:left;
    list-style: none;
    display: inline-block;
    margin-right: 0.85em;
}
.slider_list a {
    color: @white;
    background: @black;
    padding: 8px 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: @serif-head;
    font-style: italic;
    letter-spacing: 1px;
    font-size: 0.7em;
}
/*#expanderContent {
    background: #ccc;
    padding: 10px 100%;
}
#expanderContent li {
    display: inline-block;
    margin-right: 0.5em;
}
#expanderContent a {
    border-bottom: none;
    text-decoration: none;
    color: #000;
    font-size: 0.75em;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
}*/
.toggler {
    float: left;
    margin-right: 4px;
}
.slider {
    display: none;
    float: left;
    clear: both;
    position: relative;
    width:100%;
    background: #ccc;
    padding: 1em ;
}

JavaScript

$('.toggler').click(function (e) {
    e.preventDefault(); //No 'link' action
    $('.slider').hide(); //Close all open sliders (if any)
    
    var sliderName = $(this).data('slider'); //Get the slider name from the el you clicked
    $('#'+sliderName).slideDown('slow'); //Expand it
});

$('.slider .closeSlider').on('click', function(e){
    e.preventDefault(); //No 'link' action
    var slider = $(this).closest('.slider'); // Same as .parents('.slider').first()
    slider.slideUp('slow'); //Close
});