Details element with custom arrow

details-element-with-custom-arrow.markdown

Details element with custom arrow

A details element with a custom arrow, no javascript

A Pen by Niels Voogt on CodePen.

License.

index.html

<details>
	<summary>
		<span class="summary-title">Details element with custom arrow!</span>
		<div class="summary-chevron-up">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
		</div>
	</summary>

	<div class="summary-content">Give me attention or face the wrath of my claws give me attention or face the wrath of my claws and pretend not to be evil cats go for world domination allways wanting food. Eat owner's food playing with balls of wool and meow and walk away, and bleghbleghvomit
		my furball really tie the room together. Cuddle no cuddle cuddle love scratch scratch cat</div>
	<div class="summary-chevron-down">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
		
</details>

style.scss

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap");

html {
	box-sizing: border-box;
	font-size: 18px;
	font-family: "Roboto", sans-serif;
}

body {
	background: #edf2f7;
	color: #4a5568;
	height: 100%;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

$details-padding: 1em;

details {
	font-size: 1rem;
	margin: 7em auto;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	width: 100%;
	background: #ffffff;
	border-radius: 8px;
	position: relative;
	width: 500px;

	.summary-title {
		user-select: none;
	}

	&:hover {
		cursor: pointer;
	}

	.summary-content {
		border-top: 1px solid #e2e8f0;
		cursor: default;
		padding: $details-padding;
		font-weight: 300;
		line-height: 1.5;
	}

	summary {
		list-style: none;
		padding: $details-padding;

		&:focus {
			outline: none;
		}

		&:hover .summary-chevron-up svg {
			opacity: 1;
		}
	}

	.summary-chevron-up svg {
		opacity: 0.5;
	}

	.summary-chevron-up,
	.summary-chevron-down {
		pointer-events: none;
		position: absolute;
		top: 0.75em;
		right: $details-padding;
		background: #ffffff;

		svg {
			display: block;
		}
	}

	summary::-webkit-details-marker {
		display: none;
	}
}