JSFiddle - React, Tailwind, and code Playground
HTML
<div class="nad_p_igra">
<h3>1 will survive 2...</h3>
<p class="p_igra">
Kapetan, dobrodošli! Kraljevina Rivaros je pred veliko grožnjo!
Zlobni vojskovodja Gandor se bojuje proti našemu nekoč velikem imperiju.
Thanagar je edino mesto, ki še ni zajeto. Moramo se boriti in osvoboditi svoje brate.
</p>
<p class="p_igra_tipke">
sledite navodilom v igri
</p>
</div>
CSS
p {
display: none;
}
h3 {
cursor: pointer;
}
JavaScript
$(document).ready(function(){
$("h3").click(function(){
if($(".p_igra").is(":hidden")) {
$(this).nextAll().toggle(600); // this=h3, all the following sibling objects...
$(this).text(function () {
return $(this).text().replace("...", ""); // odstrani tri pike
});
} else {
$(this).nextAll().toggle(600); // this=h3, all the following sibling objects...
$(this).append('...'); //tole dodaj :)
}
});
});