JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="all-content">
 
<span class="big-title-sections">COLLECTION</span>
<a class="button" id="collection1-column">SS19</a>
<a class="button" id="collection2-column">FW19</a>
<a class="button" id="collection3-column">SS18</a>
<a class="button" id="collection4-column">FW18</a>
    
</div>



<div class="part2 collection1-column">

<div class="collection-inside-left">
Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House. Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by
</div>
        
<div class="collection-inside-right">
Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House. Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House.
</div>
          
<div class="collection-inside-total">
Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House. Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House. Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House.
</div>
</div>





<div class="part2 collection2-column">
<div class="collection-inside-left">
Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House. Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by
</div>
        
<div class="collection-inside-right">
Kenneth Jay Lane at Pierre Winters. Chair and Bull Skill by Orient House. Top by Alcer. Pants by Leo and Lin. Headpiece by Atelier Eight. Earrings by Kenneth Jay Lane at...

CSS

html, body {
height: 100%;
margin: 0;
}

.all-content{
height: auto;
float: left;
width: 200px;
margin: 0 15px 0 0;
}


.button {
cursor: pointer;
padding: 0px 30px;
display: block;
margin: 2px 0px;
max-width: 200px;
background: red;
}

.button:hover {
font-weight: bold;
}









.part.collection1-column, 
.part.collection2-column, 
.part.collection3-column, 
.part.collection4-column {
overflow: initial;
}


.collection-inside-left {
background: red;
float: left;
margin-right: 10px;
width: 36%;
}

.collection-inside-right {
background: green;
overflow: hidden;
width: auto;
}

.collection-inside-total {
background: yellow;
overflow: hidden;
margin-top: 10px;
width: 100%;
}






@media screen and (max-width: 860px) {

.collection-inside-left, 
.collection-inside-right {
float: none;
width: 100%;
margin-left: 200px;
display: block;
overflow: initial;
}
 

}

JavaScript

$(document).ready(function() {
  $('.part2').hide();
  $('.collection1-column').show();
});

$('.button').click(function(event) {
  $('.part2').hide();
  var selectedPart = $(this).attr('id');
  var setActivePart = "." + selectedPart;
  $(setActivePart).show();
});