HTML&CSS WEBDESIGN tippek
Főoldal » Kódok » Html

Mutat/Rejt (Hide/Show) html,css,js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<span class="cim"><b id="show1">+</b>/<b id="hide1">-</b>    ez egy button:</span>
<br><br>

<div id="p1" style=" display:none;border:solid 1px green; border-radius:2%;padding:10%;">Ez a tartalom</div>

<script type="text/javascript">
$(document).ready(function()
{
$("#div1").text($("#p1").css("display"));

$("#hide1").click(function()
{
if ($("#p1").is(":visible"))
{
$("#p1").toggle(1000);
$("#div1").text($("#p1").css("display"));
}
});

$("#show1").click(function()
{
if (!$("#p1").is(":visible"))
{
$("#p1").toggle(1000);
$("#div1").text($("#p1").css("display"));
}
});
});</script>

 


<style>

#show1 {font-weight: bold;font-size:16px;cursor:pointer;padding:10px;background-color: #2efe78;border-radius:1%;}
#hide1 {font-weight: bold;font-size:16px;cursor:pointer;padding:10px;background-color: #2efe78;border-radius:1%;}

.cim {

 display: inline-block;
 border-radius: 2px;
 background-color: #fea32e;
 font-weight: 700;
 padding: 12px 40px;
 -webkit-transition: all .3s;
 transition: all .3s;
 margin-top: 10px;
 text-transform: uppercase;
 color: #0f131c;
 font-size: 13px;}


</style>

 

Példa: Katt ide

Kategória: Html | Hozzáadta:: webmester1978 (04.10.2022)
Megtekintések száma: 115 | Helyezés: 0.0/0
Összes hozzászólás: 0
avatar