Faq s radiobuttonem

by Petr Haluza

HTML

<div id="FAQlist">.

    <input id="faq1" type="radio" name="faq">
    <label for="faq1">
      <span>Jak obnovím tovární nastavení kamery?</span>
      <p>Smažte kameru ze seznamu v aplikaci nebo dlouze stiskněte tlačítko reset po dobu 8s, dokud neuslyšíte hlášku “Reset, camera reboot”</p>
     </label>

    <input id="faq2" type="radio" name="faq">
    <label for="faq2">
      <span>Vybral jsem správně 2,4 GHz Wi-Fi a zadal správné heslo, ale kamera stále není připojena k Wi-Fi?</span>
      <p>(1) Zkontrolujte, zda je Wi-Fi síť kterou jste použili, stejná pro váš telefon i pro kameru.<br>
      (2) Ujistěte se, že vaše Wi-Fi má povolenou funkci DHCP. Pokud je deaktivována, kamera neobdrží IP adresu a připojení selže.<br>
      (3) Stisknutím tlačítka reset na 8 s restartujte kameru.<br>
      (4) Zkontrolujte, zda je intenzita signálu Wi-Fi vyšší než 80%.</p>
     </label>
     
    <input id="faq3" type="radio" name="faq">
    <label for="faq3">
      <span>Jak mohu změnit připojení kamery z jednoho routeru na jiný?</span>
      <p>Smažte kameru ze seznamu v aplikaci nebo dlouze stiskněte tlačítko reset po dobu 8 s.<br>
      Poté znovu nakonfigurujte kameru.</p>
     </label>
     
     <input id="faq4" type="radio" name="faq">
    <label for="faq4">
      <span>Proč není rozpoznaná SD karta? Po určité době nelze videozáznam zaznamenat?</span>
      <p>Zkontrolujte nastavení kamery a ujistěte se, že jste nastavili kameru tak, aby nahrávala na SD kartu.<br>
      Nepřekračujte maximální kapacitu SD karty 128GB. Ujistěte se, že SD karta není poškozená a je naformátována na FAT32.</p>
     </label>
     
     <input id="faq5" type="radio" name="faq">
    <label for="faq5">
      <span>Proč nemohu přijímat informace o alarmu, když vidím zařízení online a mám nastavenou detekci pohybu?</span>
      <p>Ujistěte se, že jste povolili PUSH notifikaci z aplikace Tuya Smart. Povolte alarmovou notifikaci v aplikaci.</p>
     </label>
     
     <input id="faq6"...

CSS

#FAQlist { display: flex; flex-direction:column; width:100%; max-width:400px; margin: 0 auto}
#FAQlist input[type="radio"] { opacity: 0; position: fixed; width: 0;}

#FAQlist label { display: block; background: none; padding: 0; margin:0 0 1em;
    font-size: 16px;  border: none; border-radius: 4px;}

#FAQlist label span { background-color: #3d9dea; color: white; display: block; padding: .5em 1em; border-radius: 6px }

#FAQlist label:hover span { background-color: #4a4eee; cursor:pointer }

#FAQlist input[type="radio"]:checked + label span { background-color: #4a4eee;}

#FAQlist p {display:none; padding: .5em 1em }
#FAQlist input[type="radio"]:checked + label span {border-radius: 6px 6px 0 0}
#FAQlist input[type="radio"]:checked + label p {display:block; background: #f1f1f1; border-radius: 0 0 6px 6px}