JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="fake-button" data-target="#poka12">
Przypominajka
<span class="glyphicon glyphicon-chevron-right" style="float: right"></span>
</div>
<div id="poka12" class="poka">
<div class="poka__container">.......</div>
</div>
<div class="fake-button" data-target="#poka11">
Przypominajka
<span class="glyphicon glyphicon-chevron-right" style="float: right"></span>
</div>
<div id="poka11" class="poka">
<div class="poka__container">.......</div>
</div>
CSS
.fake-button {
margin: 5px 5px 5px 5px;
border-radius: 5px;
background-color: #009999;
font-size: 25px;
color: yellow;
font-weight: bold;
padding: 25px 25px 25px 25px;
cursor: pointer;
}
.poka {
display: none;
}
JavaScript
$(document)
.find(".fake-button")
.on("click", function () {
const $target = $(document).find($(this).data("target"))
const $pokas = $(document).find(".poka")
$pokas.slideUp("slow")
$target.slideDown("slow")
})