JSFiddle - React, Tailwind, and code Playground

by chwzr

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<button class="events">
EVENTS
</button>
<button class="events-close">
EVENTS CLOSE
</button>

<div class="events-container">
EVENTS CONTAINER
</div>

<div class="contact-container">
CONTACT CONTAINER
</div>

<div class="media-container">
MEDIA CONTAINER
</div>

CSS

.events-container {
  display: none; //this makes the container "invisible" at page load time
}
.media-container {
  opacity: 100; //this makes the container "visible" at page load time
}
.contact-container {
  opacity: 100; //this makes the container "visible" at page load time
}


div {margin: 10px;}
.events-container {border: 1px solid red;}
.contact-container {border: 1px solid blue;}
.media-container {border: 1px solid purple;}

JavaScript

$(".events, .events-close").click(function(){
  $(".contact-container").fadeToggle( "slow", "linear" );
  $(".media-container").fadeToggle( "slow", "linear" );
  $(".events-container").fadeToggle( "slow", "linear" );
});