Kawałek Kodu

Kiedyś pstrykanie przyciskami w starym radio było frajdą. Nie było jednak możliwości wyłączenia wciśniętego przycisku, trzeba było wcisnąć zamiennie inny. Ewentualnie był inny trik polegający na wciśnięciu dwóch naraz. Z przyciskami radio na stronie też jest podobny problem. Co prawda dwóch jednocześnie nie uda się wciskać, ale spróbujemy innej sztuczki, która pozwoli wyłączyć wcześniej włączony INPUT.

Podłączamy zasilanie.

Jaka jest potrzeba odklikniecia takiego przycisku? Być może znasz tzw. checkbox hack, który używałeś do tworzenia rozwijanych sekcji (accordion). Mamy tu możliwość użycia zarówno INPUT o typie checkbox, który pozwoli na rozwijanie dowolnej liczby sekcji, jak również zwijanie (bowiem można zaznaczyć kilka ptaszków). Używając typu radio możliwe jest rozwinięcie jednej sekcji w danym momencie (bo w grupie można zaznaczyćjedno radio), co akurat może być fajne, ale nie ma możliwości zwinięcia właśnie otwartej klikając na nią.

Tak będzie wyglądać taki akordeon oparty o INPUT radio (mamy tu dwie niezależne grupy sekcji):

Bez odbioru.

Jak już wiemy, nie ma bezpośredniej możliwości odkliknięcia radio. Będziemy musieli posłużyć się JavaScript. Zrobimy to w ten sposób, aby każda grupa radio działała jak do tej pory, czyli jedna nie będzie wpływać na działanie innej.

#container {
  width: 320px;
}

label {
  background: #ddd;
  margin-bottom: 10px;
  cursor: pointer;
}

input[type="radio"] {
  display: none;
}

label,
input+div {
  width: 320px;
  display: block;
}

input+div {
  display: none;
  border: 1px solid #000;
}

input:checked+div {
  display: block;
  margin-bottom: 10px;
}

+

<label for="r1">Sekcja 1a</label> <input type="radio" name="g1" id="r1" />
<div>
  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
</div>

<label for="r2">Sekcja 2a</label> <input type="radio" name="g1" id="r2" />
<div>
  Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
</div>

<label for="r3">Sekcja 3a</label> <input type="radio" name="g1" id="r3" />
<div>
  Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.
</div>

<label for="r4">Sekcja 1b</label> <input type="radio" name="g2" id="r4" />
<div>
  Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus
  PageMaker
</div>

<label for="r5">Sekcja 2b</label> <input type="radio" name="g2" id="r5" />
<div>
  W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem.
</div>

<label for="r6">Sekcja 3b</label> <input type="radio" name="g2" id="r6" />
<div>
  Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu!
</div>

+

/* tu będziemy przechowywać
   referencję na kliknięty
   przycisk. Kluczem są nazwy
   radio
*/
let clickedRadios = [];
/* dla każdego radio
   podpinamy obsługę
   kliknięcia
*/
document.querySelectorAll('input[type="radio"]').forEach(function(input) {
  input.addEventListener("click", function() {
/* wyciągamy z tablicy referencję */
    let clicked = clickedRadios[this.name];
/* jeśli referencja nie wskazuje
   na klikane radio, to zapisujemy
   referencję na niego, jeśli wskazuje,
   czyli to on był ostatnio kliknięty,
   to ustawiamy na odkliknięty,
   a referencję usuwamy
*/
    if (clicked != this) {
      clicked = this;
    } else {
      this.checked = false;
      clicked = null;
    }
/* zapisujemy referencję pod kluczem
   o nazwie radio
*/
    clickedRadios[this.name] = clicked;
  });
});

Dzięki temu, krótkiego fragmentowi, nasz akordeon z poprzedniego przykładu będzie działał w ten sposób:

Do następnego wpisu! Pozostań na odpowiedniej fali!

Przydatne linki:
Radio z klonu, czyli o klonowaniu zaznaczonego przycisku radio.
Były sobie ptaszki trzy, czyli blokada checkboxów.