Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<a href="#" class="show-hide-link" id="hide"> Skryť </a> <a href="#" class="show-hide-link" id="show"> Zobraziť </a> <div class="hide-this info"> Informácie </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.show-hide-link { text-decoration: none; width: 120px; display: block; padding: 5px 0; background: blue; color: #fff; text-align: center; } @media (max-width: 767px) { /*.info {display: none;}*/ .info { position: static; top: 120px; left: 0; background: rgba(0, 0, 0, .8); color: #000; } #show {display: none; } #hide:focus + #show {display: block; } #hide:focus { display: none; } #hide:focus ~ .info { display:none; } #show:focus ~ .info { display: block; } #show:after, #hide:after { font-family: 'FontAwesome'; } #show:after { content: "\f06e"; } #hide:after { content: "\f070"; } /*@media print {#hide, #show { display: none; } }*/ }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>