JSFiddle - React, Tailwind, and code Playground

by chwzr

HTML

<button class="events">
  EVENTS
</button>
<button class="events-close">
  EVENTS CLOSE
</button>

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

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

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

CSS

.events-container {
  display: none;
}

div {
  margin: 10px;
}

.events-container {
  border: 1px solid red; position: absolute;
}

.contact-container {
  border: 1px solid blue; position: absolute;
}

.media-container {
  border: 1px solid purple; position: absolute; top: 80px;
}

JavaScript

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