Имеются блоки, при нажатии на которых внизу должен появиться блок, определенный в data-item. К примеру, если он кликнул по блоку с data-item-open="1", внизу должен появиться блок с data-item="1".
var items = $(".item");
var show = items.data("item-open");
items.data("item-open");
document.write(show + " - Modal");
body{
font-family: sans-serif;
}
.row, .content{
display: flex;
flex-direction: row;
}
.item, .show_div{
width: 75px;
height: 50px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
cursor: pointer;
}
.item span, .show_div span{
text-transform: uppercase;
font-size: 10px;
color:#fff;
}
.content{
height:100px;
}
.content h3{
width:50%;
font-size: 16px;
}
.show_div{
display: none;
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="item" data-item-open = "1">
<span>Insides</span>
</div>
<div class="item" data-item-open = "2">
<span>crying</span>
</div>
<div class="item" data-item-open = "3">
<span>save</span>
</div>
<div class="item" data-item-open = "4">
<span>me </span>
</div>
<div class="item" data-item-open = "5">
<span>now </span>
</div>
</div>
<div class="content">
<h3>Здесь должны быть показаны определенные блоки data-item, при нажатии на верхние блоки</h3>
<div class="show_div" data-item = "1">
<span>You </span>
</div>
<div class="show_div" data-item = "1">
<span>were </span>
</div>
<div class="show_div" data-item = "1">
<span>there </span>
</div>
<div class="show_div" data-item = "1">
<span>impossibly </span>
</div>
<div class="show_div" data-item = "1">
<span>alone </span>
</div>
</div>