Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

[CSS] Kan niet klikken in collapsable div

Pagina: 1
Acties:

  • Brent
  • Registratie: september 2001
  • Laatst online: 14-04 16:49
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:
1
2
3
4
5
6
7
8
9
10
<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.

Humanist | Kernpower! | Determinist | Netiquette | Politiek dakloos


  • NMe
  • Registratie: februari 2004
  • Laatst online: 23:36

NMe

Quia Ego Sic Dico.

: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.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • Zoefff
  • Registratie: september 2001
  • Laatst online: 23:16

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]


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 23:45
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:
1
2
3
4
5
6
7
8
9
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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
  • Registratie: september 2001
  • Laatst online: 14-04 16:49
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.
_/-\o_ 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 :P

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

Humanist | Kernpower! | Determinist | Netiquette | Politiek dakloos


  • _Thanatos_
  • Registratie: januari 2001
  • Laatst online: 07-04 08:22

_Thanatos_

Ja, en kaal

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
  • Registratie: september 2001
  • Laatst online: 14-04 16:49
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.

Humanist | Kernpower! | Determinist | Netiquette | Politiek dakloos

Pagina: 1


Apple iPhone 12 Microsoft Xbox Series X LG CX Google Pixel 5 Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True