[CSS] Kan niet klikken in collapsable div

[Brent]

Ben hier nu al een paar uurtjes zoet mee en ik kom er niet uit, behalve dan dat het met een pure CSS oplossing niet lijkt te kunnen.

Ik heb een pagina met een paar kopjes en daaronder een div. Standaard wil ik die divs verbergen, en alleen tonen als je op een kopje klikt. Als je op een andere klinkt moet hij weer dichtvallen. Dit gaat goed, tenzij ik in een reeds getoonde div ga klikken (op een linkje bijvoorbeeld). Dan klapt ie namelijk ook dicht. Dit wil ik niet, want zo kan ik dus niet op links klikken. Het doel is dit met slechts CSS op te knappen.

Een minimaal voorbeeld:

code:

<style type="text/css">
a.exp + div {display:none;}
a.exp:focus + div {display:block;}
a.exp + div:focus {display:block !important;}
</style>

<a class="exp" href="#" tabindex="1">Kopje 1</a>
<div>content</div>
<a class="exp" href="#" tabindex="2">Kopje 2</a>
<div>content</div>

De derde regel van de CSS doet dus niet wat ik denk dat het zou moeten doen: de div zichtbaar houden als erin geklikt wordt. De eerste regel lijkt het ten allen tijden te overriden, de !important ten spijt. Ik zal dus wel een denkfoutje maken, maar ik kom er niet achter wat.

[NMe]

:focus hiervoor misbruiken zou ik niet doen, precies om het probleem dat je nu ondervindt. Dit soort dingen moet helaas nog steeds in javascript om enigszins werkbaar te zijn.

[Zoefff]

Als je dit zonder javascript wilt oplossen kan je het beste de :target selector gebruiken. Daarmee heb je wél stijlen die toegepast blijven totdat je een ander kopje opent of het huidige sluit.

Op http://kraagjes.nl/speeltuin/testcases/css3-collapse.html vind je een voorbeeld, al was dat oorspronkelijk een testcase voor een ander probleem. De transities kan je negeren, maar het illustreert ook goed wat ik bedoel met de :target selector en hoe deze werkt

Waar ik in de testcase vooral mee aan het stoeien was is de manier waarop de inhoud zichtbaar wordt met dergelijke transities. Als je daar geen vertraging in stopt wordt de box van 0x0 met stapjes van 1 pixel in zowel hoogte als breedte opgerekt, waardoor je een mal "uitrekkende-tekst" effect krijgt. Door het definiëren van de hoogte en een vertraagde fade-in kan je dat voorkomen, of ziet het er in ieder geval goed uit. Maargoed, dat is niet relevant voor jouw vraag

[ Voor 35% gewijzigd door Zoefff op 31-10-2012 17:59 ]

[R4gnax]

Brent schreef op woensdag 31 oktober 2012 @ 16:58:
Het doel is dit met slechts CSS op te knappen.

Het kan, maar is niet ideaal en wordt niet door alle browsers ondersteund. Alleen daarom al zul je toch naar een oplossing met JavaScript moeten kijken.

Toch nog nieuwsgierig? De truc is om de :checked pseudo-selector te gebruiken i.c.m. een groep radio buttons die benaderbaar zijn via labels. Vervolgens gebruik je een CSS clipping rectangle om de radio button zelf onzichtbaar (maar nog wel interactief) te maken.

HTML:

<label class="kop" for="kop-1">Kop 1</label>
<input type="radio" name="kop" id="kop-1" />
<div class="paneel">content</div>
<label class="kop" for="kop-2">Kop 2</label>
<input type="radio" name="kop" id="kop-2" />
<div class="paneel">
    content
    <input type="text" />
</div>

Cascading Stylesheet:

.kop {
    cursor     : pointer;
    display    : block;
    background : #bbb;
    padding    : .35em .7em;
}

.paneel {
    display    : none;
    background : #eee;
    padding    : .35em .7em;
}

.kop + input {    
    position : absolute;
    clip     : rect(0, 0, 0, 0);
    outline  : none;
}

.kop + input:checked + .paneel {
    display : block;
}

Je kunt dit voorbeeld live zien op JSFiddle.


Even nog voor de duidelijkheid: het is fijn dat dit werkt, maar form elementen zijn hier niet voor bedoeld. Semantisch gezien deugt dit voor geen meter en de browser ondersteuning is (zoals eerder al gezegd) niet perfect. Je zou iets als dit dus ook niet in productie moeten gebruiken.

[Brent]

Zoefff schreef op woensdag 31 oktober 2012 @ 17:53:
Als je dit zonder javascript wilt oplossen kan je het beste de :target selector gebruiken. Daarmee heb je wél stijlen die toegepast blijven totdat je een ander kopje opent of het huidige sluit.

Zo is het inderdaad nog beter ook, omdat je dan ook de div toont als men surft naar #target. Dat was de volgende geplande stap

Waar ik in de testcase vooral mee aan het stoeien was is de manier waarop de inhoud zichtbaar wordt met dergelijke transities. Als je daar geen vertraging in stopt wordt de box van 0x0 met stapjes van 1 pixel in zowel hoogte als breedte opgerekt, waardoor je een mal "uitrekkende-tekst" effect krijgt. Door het definiëren van de hoogte en een vertraagde fade-in kan je dat voorkomen, of ziet het er in ieder geval goed uit. Maargoed, dat is niet relevant voor jouw vraag

Deze iteratie had ik precies zo eerder vandaag (afgezien van de :target), ik hou er alleen niet van om per se min-height te moeten zetten

Bedankt voor alle input iig, oude browsers bekommer ik me niet om

[_Thanatos_]

De <div> is niet focusable, en dus heeft het declareren van een :focus-pseudoclass ook geen zin.
Je kunt em focusable maken door em een tabindex-attribuut te geven...

disclaimer: dit is erg lang geleden voor mij, weet niet of deze truuk nog steeds werkt

[Brent]

Ben toch net even wezen kijken of ik het in IE9 aan de praat kan krijgen (die snapt :target namelijk ook). Het hele voorbeeld maakt gebruik van door IE9 gesupporte zaken, maar toch werkt het hier niet. Ik vond veel alternatieven die ongeveer neerkomen op Zoefffs voorbeeld, maar ook deze: http://jsfiddle.net/rED4c/. Die werkt wel gewoon in IE9. Ik snapt niet waarom mijn voorstel (met :target) niet werkt. in IE9, volgens mij zou t gewoon moeten kunnen.