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
<h1>Properties for sale</h1><br> <b> Locations </b> <br><br> <input type="radio" name="lokace" value="all" id="all" checked=""><label for="all">Show all</label> <input type="radio" name="lokace" value="praha-1" id="praha-1"><label for="praha-1">Praha 1</label> <input type="radio" name="lokace" value="praha-2" id="praha-2"><label for="praha-2">Praha 2</label> <input type="radio" name="lokace" value="praha-3" id="praha-3"><label for="praha-3">Praha 3</label> <input type="radio" name="lokace" value="Praha 4" id="Praha 4"><label for="Praha 4">Praha 4</label> <br><br> <b>Type</b> <br><br> <input type="radio" name="typ" value="byt" id="byt"><label for="byt">Flat</label> <input type="radio" name="typ" value="dum" id="dum"><label for="dum">House</label> <br><br> <b>Size</b> <br><br> 1. max. 50 m² <br> 2. max. 80 m² <br> 3. max. 140 m² <br><br> <b>Price </b> <br><br> 1. to 2 000 000 <br> 2. to 6 000 000 <br><br> <br><hr> <b>Results</b> <br><br> <ul> <li class="praha-1 byt">AAAAAAA</li> <li class="praha-1 dum">BBBBBBBB</li> <li class="praha-1 byt">CCCCCCCCC</li> <li class="praha-1">DDDDDDDDDDDDDD</li> <li class="praha-2">SDSDSD</li> <li class="praha-2">QWEW</li> <li class="praha-3">SGSDSD</li> <li class="praha-4">QWWQWQWWQ</li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
input:not(:checked) ~ ul li {display: none} input#all:checked ~ ul li {display: list-item} input#praha-1:checked ~ ul .praha-1 {display: list-item} input#praha-2:checked ~ ul .praha-2 {display: list-item} input#praha-3:checked ~ ul .praha-3 {display: list-item} input#praha-4:checked ~ ul .praha-4 {display: list-item}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>