JSFiddle - React, Tailwind, and code Playground

by Jordan Dayton

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      <iframe width="300" height="150" style="width: 100%; height: 1500px;" src="https://artemishealth.jetwebinar.com/basictraining"></iframe>
    </div>
  </div>
  
  
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      <iframe width="300" height="150" style="width: 100%; height: 1500px;" src="https://artemishealth.jetwebinar.com/intermediatetraining"></iframe>
    </div>
  </div>
</div>

CSS

.container .box {
  float: left;
  width: 100%;
  margin: 20px;
  display: inline-block;
}

.container .box .top {
  padding: 12px;
  width: 100px;
  background-color: blue;
  color: white;
  cursor: pointer;
  display: inline-block;
}

.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}

JavaScript

$('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.bottom').hide();
	$parent_box.find('.bottom').toggle();
});