Accordions - uitklapbare teksten

Voorbeeld:

Lorem Ipsum

Curabitur sit amet bibendum metus, eu ultrices orci. Integer eleifend purus in convallis placerat. Nunc maximus sit amet nibh sed tempor. Mauris tristique in ipsum eget porta. Suspendisse convallis in sapien a volutpat. Morbi malesuada et lorem at commodo. Vestibulum luctus pellentesque tortor at scelerisque. Phasellus fringilla vehicula commodo.

Lorem Ipsum

Indien één van de partijen na de beëindiging van het huwelijk of geregistreerd partnerschap niet voldoende inkomsten heeft voor zijn of haar levensonderhoud en deze in redelijkheid voorlopig niet kan verwerven, zullen we ook afspraken maken over de te betalen partneralimentatie. De partneralimentatie bereken ik voor u volgens de richtlijnen die de rechtbank hanteert.

Lorem Ipsum

Curabitur sit amet bibendum metus, eu ultrices orci. Integer eleifend purus in convallis placerat. Nunc maximus sit amet nibh sed tempor. Mauris tristique in ipsum eget porta. Suspendisse convallis in sapien a volutpat. Morbi malesuada et lorem at commodo. Vestibulum luctus pellentesque tortor at scelerisque. Phasellus fringilla vehicula commodo.

Voor gebruik van accordions plaats je de hele code die hiernaast te zien is in zijn geheel in een HTML module. De code bestaat uit 3 delen:

de HTML opbouw van de accordion.
Hierin moet de tekst die uitklapbaar moet worden geplaatst worden.
De CSS styling van de accordion.
Hiermee wordt het uiterlijk van de accordion bepaalt Dit kan desgewenst aangepast worden.
Het JQUERY script voor de accordion.
NIET AANKOMEN

Let op: Het gebruik van accordions maakt het minder makkelijk voor de klant om zelf teksten aan te passen.

<div class="accordion">
				
				<div class="accordion-section">
					<a class="accordion-section-title" href="#accordion-1">Lorem Ipsum</a>
					<div id="accordion-1" class="accordion-section-content">	   
						<p>Curabitur sit amet bibendum metus, eu ultrices orci. Integer eleifend purus in convallis placerat. Nunc maximus sit amet nibh sed tempor. Mauris tristique in ipsum eget porta. Suspendisse convallis in sapien a volutpat. Morbi malesuada et lorem at commodo. Vestibulum luctus pellentesque tortor at scelerisque. Phasellus fringilla vehicula commodo.
						</p>
					</div>
				</div>
				
				  
				<div class="accordion-section">
					<a class="accordion-section-title" href="#accordion-2">Lorem Ipsum</a>
					<div id="accordion-2" class="accordion-section-content">
						<p>Indien één van de partijen na de beëindiging van het huwelijk of geregistreerd partnerschap niet voldoende inkomsten heeft voor zijn of haar levensonderhoud en deze in redelijkheid voorlopig niet kan verwerven, zullen we ook afspraken maken over de te betalen partneralimentatie. De partneralimentatie bereken ik voor u volgens de richtlijnen die de rechtbank hanteert.
						</p>
					</div>
				</div>
				
			 	  
				<div class="accordion-section">
				<a class="accordion-section-title" href="#accordion-3">Lorem Ipsum</a>
					<div id="accordion-3" class="accordion-section-content">
						<p>Curabitur sit amet bibendum metus, eu ultrices orci. Integer eleifend purus in convallis placerat. Nunc maximus sit amet nibh sed tempor. Mauris tristique in ipsum eget porta. Suspendisse convallis in sapien a volutpat. Morbi malesuada et lorem at commodo. Vestibulum luctus pellentesque tortor at scelerisque. Phasellus fringilla vehicula commodo.
						</p>
					</div>
				</div>
				
			</div>

<style>
				/*-- Accordion --*/
			.accordion, .accordion * {
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				box-sizing:border-box;
			}
			 
			.accordion {
				overflow:hidden;
				box-shadow:0px 1px 3px rgba(0,0,0,0.25);
				border-radius:3px;
				background:#f7f7f7;
			}
			 
			/*-- Section Titles --*/
			.accordion-section-title {
				width:100%;
				padding:15px;
				display:inline-block;
				border-bottom:1px solid #F7E2BD;
				background:#0C1B2B;
				transition:all linear 0.15s;
				/* Type */
				font-size:1em;
				text-shadow:0px 1px 0px #1a1a1a;
				color:#fff;
			}
			 
			.accordion-section-title.active, .accordion-section-title:hover {
				background:#2D5682;
				/* Type */
				text-decoration:none;
			}
			 
			.accordion-section:last-child .accordion-section-title {
				border-bottom:none;
			}
			 
			/*-- Section Content --*/
			.accordion-section-content {
				padding:15px;
				display:none;
			}
			</style>

			<script>
				$(document).ready(function() {
				function close_accordion_section() {
					$('.accordion .accordion-section-title').removeClass('active');
					$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
				}
			 
				$('.accordion-section-title').click(function(e) {
					// Grab current anchor value
					var currentAttrValue = $(this).attr('href');
			 
					if($(e.target).is('.active')) {
						close_accordion_section();
					}else {
						close_accordion_section();
			 
						// Add active class to section title
						$(this).addClass('active');
						// Open up the hidden content panel
						$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
					}
			 
					e.preventDefault();
				});
			});
			</script>