Inklapbare uitklapbare accordeon sectie maken met CSS

Logo cursus traing wordpress

Inklapbare uitklapbare accordeon sectie maken met CSS

Wat is een uitklapbare accordeon in WordPress website

Een accordeon is een lijst waarvan je de verschillende onderdelen kunt “openklappen” om meer informatie te krijgen. Zo voorkom je dat je bezoekers eindeloos moeten scrollen om de informatie te vinden waar ze naar op zoek zijn. Sommige (betaalde) WordPress themes hebben standaard functionaliteit ingebouwd om een accordeon te maken. Enkele voorbeelden van thema’s die dit hebben:

Uitklapbare accordeon sectie maken met WordPress plugin

Wij hebben verschillende plugins voor u getest en de beste voor u op een rijtje gezet.

Arconix Kortcodes

Arconix is een gratis plugin en geeft je verschillende shortcodes waarmee je een accordeon aan je website kunt toevoegen. Met deze plugin kun je niet alleen accordeons maken, maar ook tabbladen toevoegen aan je pagina’s en verschillende soorten knoppen toevoegen.

Accordeon

De gratis Accordion plugin met 35.000 downloads wordt vaak geüpdatet en biedt een intuïtieve interface waarin je je accordeons kunt maken. Je kunt deze accordeons vervolgens in je pagina’s of posts gebruiken met een shortcode.

Easy Accordion

Deze gratis accordeon plugin richt zich op accordeons, maar biedt tientallen verschillende lay-outs en zelfs effecten die je kunt gebruiken voor je accordeon. Als je allerlei animaties aan je accordeons wilt toevoegen, dan is deze plugin iets voor jou.

Shortcodes Ultimate

Als je WordPress veel gebruikt, heb je de Shortcodes Ultimate plugin misschien al gezien. Deze plugin niet alleen een shortcode voor accordeons toe, maar ook voor tientallen andere elementen die je misschien zou willen gebruiken. Zo kun je tabbladen maken, maar ook kolommen, sliders en nog veel meer!

Uitklapbare accordeon sectie maken zonder plugin met code

Inklapbare secties zijn secties van inhoud die kunnen krimpen en uitklappen door er op te klikken. Ze zijn een populaire manier om inhoud te organiseren op zo’n manier dat de gebruiker de inhoud van een sectie alleen kan zien als hij dat wil. In dit artikel zullen we leren hoe je een eenvoudige inklapbare sectie maakt met CSS en .

Dit wordt gedaan door gebruik te maken van een knop en de inhoud van de sectie in te sluiten in een div. De event listener is toegevoegd aan de knop om te luisteren naar muisklikken. De “Active” klasse wordt bij elke klik op de knop omgeschakeld. Wanneer de sectie wordt uitgeklapt, verandert de van de knop. Ook wordt de “display” eigenschap van de inhoud veranderd in “block” op de klikknop gebeurtenis om het zichtbaar te maken wanneer het “none” (verborgen) is en vice versa, zoals hieronder getoond.

https://www.w3schools.com/howto/howto_js_collapsible.asp

Uitklapper maken met animatie

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate


Wil je meer details over Inklapbare uitklapbare accordeon sectie maken met CSSof info?

Wil je meer weten? Veel bezoekers met interesse in Inklapbare uitklapbare accordeon sectie maken met CSS bekeken ook de onderstaande handleidingen:


[aw_icon icon="icon: graduation-cap" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

[aw_icon icon="icon: question" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

Info over Inklapbare uitklapbare accordeon sectie maken met CSS?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Inklapbare uitklapbare accordeon sectie maken met CSS en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven