Wsrtjtyk

I'm following this CodePen to create a pure css accordion. I like the case on the right of the screen. It opens and closes tab content using an input of type radio. I'd like to modify it so that when you click on a tab that's open, the content can collapse. Currently, you can only collapse it by opening another tab, a functionality which I'd like to keep. But I also wanna be able to close it by clicking directly on it. Only one tab should be open at once, or none at all.

I tried adding a default max-height of 0 to the tab content like this, but that didn't really do much, and I believe it's redundant:

.tab input ~ .tab-content {

  max-height: 0;

}



/* :checked */

.tab input:checked ~ .tab-content {

  max-height: 100vh;

}

Any suggestions?

Edit: I've realized that the reason I can't collapse it is because the default behavior of radio buttons doesn't allow me to 'uncheck' them just by clicking on them. But the reason this accordion works in the way I want (close the other tabs when one opens) is because it's using radio inputs instead of checkbox inputs. So my solution will have to keep the best of both worlds, perhaps by using javascript to uncheck the radio buttons when clicked. However, I was trying to keep this as a pure CSS accordion. Still at a loss...

This is not possible with pure CSS. You will need javascript to change the checked property on the radio button to false if it is already checked when clicking on it.

Javascript example:

var radios = document.querySelectorAll('input[type="radio"]');



for(i=0; i<radios.length; i++ ) {

    radios[i].onmousedown = function() {

        let checked = this.checked;



        this.onclick = function() {

            if (checked) {

                this.checked = false;

            }

        }

    }

}

jQuery example:

$('input[type="radio"]').on('mousedown', function() {

    let checked = this.checked;



    $(this).on('click', function() {

        if (checked) {

            this.checked = false;

        }

    })

})

How radio buttons work is they change only onclick and not onmouseup, and by the time onclick is fired the checked property will already be set to true. So if you only have a listener for onclick, checked will always be true and you won't be able to activate the radio at all. Therefore, the mousedown listener is necessary before onclick to see if the radio is already checked so you can properly uncheck it when the click event is fired.

It's much easier to understand when you see, so here's a fiddle showing what I mean.

http://jsfiddle.net/d6uLqy0c/4/