collapsable div

[MAV]

Hoi,

Ik ben op zoek naar wat css functionaliteit om een deel van aside div in te laten klappen.

Het idee is dat er alleen een kop te zien is en geen content op het moment dat de pagina laadt, door op de kop te klikken verschijnt de content. De hidden content mag geen plek innemen.

Ik weet dat dit moet kunnen, maar kan op internet steeds niet vinden hoe het toe te passen. Heeft iemand ideeën hierover? Een link naar een site die dit uitlegt is ook uitstekend.

thx alvast!
MAV

 

[tecsman]

Wat jij wilt is een deel van je content laten zien mbv {display:none} of {display:block}
op basis van bijvoorbeeld een 'hover'

a. {display: none}
a.hover {display: block}

 

[MAV]

Ja, dat klopt! alleen niet op basis van hover, maar op basis van onclick.
Kan je dan .aside.onclick {display: block} zeggen?

 

[MAV]

Ik heb nog weer zitten puzzelen, maar kom er helaas nog steeds niet uit. Misschien moet ik specifieker zijn. Ik heb een site gevonden waar een demo te vinden is van wat ik wil. Hier wordt alleen JavaScript gebruikt. Omdat ik geen JavaScript beheers en niet zondermeer wil copypasten ben ik op zoek naar vergelijkbare functionaliteit in css.
demo

 

[csshunter]

Hoi MAV,
Helaas, deze functionaliteit bestaat niet in css.

• Hoofdregel: CSS is zuiver voor de opmaak, en Javascript is er voor het toevoegen van functionaliteit.
• Een CSS-hover, die eigenlijk ook een soort functie is, is daarbij een uitzondering.

Dus als je een submenu wilt laten uitklappen via een onclick-functie, zit je aan javascript gebakken.

Wil je persé geen javascript gebruiken, dan is er ook nog wel een uitweg:

• Je laat de klik op een hoofditem naar een hele nieuwe pagina gaan, waarop het betreffende submenu al staat uitgeklapt.
• Verder is die pagina compleet identiek aan de eerste, dan lijkt het net of je op die pagina bent gebleven.
• Bij veel uitklapbare items zit je dan wel veel gekloonde pagina's te maken.

Dus erg handig is deze uitweg nu ook weer niet!

Maar aan de andere kant kan je ook weer van de nood een deugd maken:

• De "tussenpagina's" met het uitgeklapte submenu tot echte pagina's promoveren, en daarop bv. een korte samenvatting geven van wat er in elk item van het betreffende submenu te lezen valt. Met in de inhoud dan steeds een "Lees verder ..." erbij.
• Wie de pagina voor het eerst bezoekt, kan desgewenst de samenvattingen even lezen alvorens te klikken. Bij een terugkomend bezoek kan men meteen in het menu doorklikken: voor elk wat wils.

Met vriendelijke groet,
CSShunter
_________
PS:
Op de demo-pagina staat:

<script language="javascript"> 
...
</script>

Maar dat is ouderwets en nu fout; het moet zijn:

<script type="text/javascript">
...
</script>