JSFiddle - React, Tailwind, and code Playground

by triowinner

HTML

<a class="click">Открыть</a>

<div class="content">
<a class="target" href="#a1">Блок 1</a>
<a class="target" href="#a2">Блок 2</a>
<a class="target" href="#a3">Блок 3</a>

<div class="block1" id="a1">Инфо 1</div>
<div class="block1" id="a2">Инфо 2</div>
<div class="block1" id="a3">Инфо 3</div>
</div>

CSS

a.click, a.target, input[type="button"], button {float: left; padding: 12px 15px; font-size: 16px; background: #6f7381; color: #fff; border: none; cursor: pointer; margin: 20px 20px 20px 0;}
.click.active, .click:hover, .target.active, .target:hover {background: #a83131;}
.block1, .block2, .block3 {display: none; float: left; padding: 20px; width: 860px; height: 150px; background: #777;}
.content {display: none; float: left;}

JavaScript

$(function() {
  $('a.click').on('click', function() { 
  $(this).addClass('active');
  var active = $(this).hasClass('active');
   if ( active == 1 ) {
     $('.content').show(0);
   } else ( active == 0 ) {
     $('.content').hide(0);
   }
  });



});