Underlined

V235-01

Alternatieve view voor de text accordion

Hoe te gebruiken?

Voeg de tekst accordion toe aan de pagina en neem onderstaande CSS over.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren.accordion .collapsible-text {
	border-style: solid;
	border-color: currentColor;
	border-width: 0;
	border-bottom-width: var(--panel-border);
	margin-bottom: 1rem;
}

.accordion .collapsible-text-title {
	font-size: 1.25em;
	border-radius: 0;
	border: none;
	border-bottom: none;
	position: relative;
	padding-right: 3rem;
	padding-bottom: 1rem;
	font-weight: bold;
}

.accordion .collapsible-text-title::after {
	content: "\2b";
	position: absolute;
	right: 0.5rem;
	top: 0.375em;
	font-size: 1.25em;
	font-weight: bold;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 100ms ease-in-out;
	line-height: 1;
	text-align: center;
	width: 1em;
	height: 1em;
}

.accordion .collapsible-text-title.collapsed::after {
	transform: rotate(0deg);
}

.accordion .collapsible-text-title:active,
.accordion .collapsible-text-title:focus,
.accordion .collapsible-text-title:hover {
	box-shadow: none;
}

.accordion .collapsible-text-content {
	border: none;
	border-radius: 0;
}

.accordion .collapsible-text-content .pt-2 {
	padding-top: 0px !important;
	padding-bottom: 0.5rem !important;
}

@media screen and (min-width: 992px) {
	.accordion .collapsible-text-title {
		font-size: 1.5em;
		padding-bottom: 1.5rem;
	}

	.accordion .collapsible-text-content .pt-2 {
		padding-bottom: 1rem !important;
	}
}