JSFiddle - React, Tailwind, and code Playground

by triowinner

HTML

<body>
<div class="center">
<div class="content">

<div class="hid">
<input type="button" class="click" data=".block1" value="Открыть">
<input type="button" class="click" data=".block2" value="Открыть">
<input type="button" class="click" data=".block3" value="Открыть">
</div>

<div class="hidden">
<div class="block1">Блок первый</div>
<div class="block2">Блок второй</div>
<div class="block3">Блок третий</div>
</div>

</div>
</div>
</body>

CSS

@import "http://fonts.fontstorage.com/import/opensans.css";

/* General */
html {width: 100%; height: 100%;}
body {background: #27252c; color: #fff; font-size: 13px; font-family: 'Open Sans', sans-serif; line-height: 16px;}
html, body, address, blockquote, div, p, pre, h1, h2, h3, h4, h5, h6, hr, ul, ol, li, a, br, code, em, i, span, img, table, tbody, td, tr, input, textarea, select, button, form, fieldset, legend, label {margin: 0px; padding: 0px;}
form {padding:0px; margin:0px;}
select {font-size: 12px;}
hr {float: left; width: 900px; border: 3px solid #333; margin: 20px 0; clear: both;}
.clear {clear: both;}

a {outline: none; text-decoration: none; color: #50D8C0;}
a:hover {outline: none; text-decoration: none;}
h1,h2,h3,h4,h5,h6 {font-weight: 500;}

/* webkits */
textarea:focus, input:focus {outline: none !important;}
input, button, textarea, select {outline: none !important; resize: none;}
input:active, textarea:active {outline: none !important;}
input:-webkit-autofill {background-color: #fff !important; outline-color: #fff !important; border: none !important;}
*::-moz-placeholder {color: #fff !important; opacity: 0.6;}
*:-moz-placeholder {color: #fff !important; opacity: 0.6;}
*::-webkit-input-placeholder {color: #fff !important; opacity: 0.6;}
*:-ms-input-placeholder {color: #fff !important; opacity: 0.6;}

/* Содержимое */
.center {margin: 50px auto 0; width: 900px;}
.center .content {float: left; padding: 20px; width: 900px; background: #454750;}
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;}
.block, .block1, .block2, .block3 {display: none; float: left; padding: 20px; width: 860px; height: 150px; background: #777;}
.cont {display: none; float: left;}

JavaScript

$('input').on( 'click', function () {
  var active = $(this).hasClass('active');
  var target = $(this).attr('data');
  var showBlock = $('.hidden div').is(':visible');
  if ( active == 0 ) {
    $('.hid input').removeClass('active').attr('value', 'Открыть');
    $(this).addClass('active').attr('value', 'Закрыть');
	$('.hidden div').hide(0);
	$(target).show(0);
  } else if ( active == 1 ) {
      $(this).removeClass('active').attr('value', 'Открыть');
	  $(target).hide(0);
    } else if ( showBlock == 1 ) {
	    $('body').on( 'click', function () {
		  $(target).hide(0);
		});
	  }
});