JSFiddle - React, Tailwind, and code Playground

by switch74

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div class="page">
    <div class="box1a"><a href="#">text</a>
        <div class="box1b">Спрятанный текст</div></div>
    <div class="box2a"><a href="#">text</a>
        <div class="box2b">Спрятанный текст</div></div>    
    <div class="box3a"><a href="#">text</a> 
        <div class="box3b">Спрятанный текст</div></div>       
    <div class="box4a"><a href="#">text</a>   
        <div class="box4b">Спрятанный текст</div></div>              
</div>

CSS

.box1a {
width: 50px;
height: 50px;
position: absolute;
left:50px;
top: 100px;
background:red;
}

.box1b {
width: 550px;
height: 350px;
background:green;
}

.box2a {
width: 50px;
height: 50px;
position: absolute;
left:300px;
top: 100px;
}
.box2b {
width: 550px;
height: 350px;
background:green;
}

.box3a {
width: 50px;
height: 50px;
position: absolute;
left:450px;
top: 100px;
}
.box3b {
width: 550px;
height: 350px;
background:green;
}

.box4a {
width: 100px;
height: 120px;
position: absolute;
right:50px;
top: 100px;
}
.box4b {
position:absolute;
right:0px;
width: 550px;
height: 350px;
background:green;
}









footer {
    border-top: solid 1px #fff;
width: 960px;
    position: relative;
margin: 0 auto;
}

JavaScript

$(function(){
	    $('.box1a .box1b').hide();
	    $a = $('.box1a a');
	    $a.on('click', function(event) {
	      event.preventDefault();
	      $a.not(this).next().slideUp(500);
	      $(this).next().slideToggle(500);
	    });
	});

$(function(){
	    $('.box2a .box2b').hide();
	    $a = $('.box2a a');
	    $a.on('click', function(event) {
	      event.preventDefault();
	      $a.not(this).next().slideUp(500);
	      $(this).next().slideToggle(500);
	    });
	});

$(function(){
	    $('.box3a .box3b').hide();
	    $a = $('.box3a a');
	    $a.on('click', function(event) {
	      event.preventDefault();
	      $a.not(this).next().slideUp(500);
	      $(this).next().slideToggle(500);
	    });
	});



$(function(){
	    $('.box4a .box4b').hide();
	    $a = $('.box4a a');
	    $a.on('click', function(event) {
	      event.preventDefault();
	      $a.not(this).next().slideUp(500);
	      $(this).next().slideToggle(500);
	    });
	});