JSFiddle - React, Tailwind, and code Playground

by stic_k

HTML

<div class="block">
  <div class="block__item">
    <div class="question">Первое видео</div>
    <div class="content">
      <div class="content__video"></div>
      <div class="content__text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eius temporibus eaque maiores fugit aspernatur assumenda adipisci minus nisi alias facere dolore, mollitia ea harum possimus illum enim animi tempora.</p>
      </div>
    </div>
  </div>
  <div class="block__item">
    <div class="question">Второе видео</div>
    <div class="content">
      <div class="content__video"></div>
      <div class="content__text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eius temporibus eaque maiores fugit aspernatur assumenda adipisci minus nisi alias facere dolore, mollitia ea harum possimus illum enim animi tempora.</p>
      </div>
    </div>
  </div>
  <div class="block__item">
    <div class="question">Третье видео</div>
    <div class="content">
      <div class="content__video"></div>
      <div class="content__text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eius temporibus eaque maiores fugit aspernatur assumenda adipisci minus nisi alias facere dolore, mollitia ea harum possimus illum enim animi tempora.</p>
      </div>
    </div>
  </div>
  <div class="block__item">
    <div class="question">Четвёртое видео</div>
    <div class="content">
      <div class="content__video"></div>
      <div class="content__text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eius temporibus eaque maiores fugit aspernatur assumenda adipisci minus nisi alias facere dolore, mollitia ea harum possimus illum enim animi tempora.</p>
      </div>
    </div>
  </div>
</div>

SCSS

.question {
  cursor: pointer;
  font-size: 20px;
  color: red;
  background: #ccc;
  margin: 10px 0px;
  font-weight: bold;
}

.content {
  display: none;
   &__video {
    width: 200px;
    height: 100px;
    background: #000;
  }
}

JavaScript

$(function() {
	$('.question').on('click', function(){
		var current = $(this).next();
		current.stop().slideToggle();
		$('.content').not(current).stop().slideUp();
	});
});