blog/web
<html lang="en">
<head>
<title>collapse example</title>
<style>
.icon::after {
content: "+";
}
#toggle:checked ~ label > .icon::after {
content: "-";
}
#toggle:checked ~ div {
grid-template-rows: 1fr !important;
}
#toggle1:checked ~ label > .icon::after {
content: "-";
}
#toggle1:checked ~ div {
grid-template-rows: 1fr !important;
}
#toggle2:checked ~ label > .icon::after {
content: "-";
}
#toggle2:checked ~ div {
grid-template-rows: 1fr !important;
}
</style>
</head>
<main>
<div style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
<input id="toggle" class="toggle" type="checkbox" style="display: none;" name="dropdown" />
<label class="form-label" style="width: 100%;border-bottom: 1px solid #232B2B;display: flex;justify-content: space-between;font-size: 32px;color: inherit;font-weight: 300;line-height: 48px;cursor: pointer;user-select: none;" for="toggle">
<span>Lorem ipsum</span><span class="icon" style="width: 32px;display: flex;justify-content: center;color: inherit;"></span>
</label>
<div class="content" style="display: grid;grid-template-rows: 0fr;transition: 250ms grid-template-rows ease;">
<div style="overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo. Fusce malesuada vulputate faucibus. Integer in hendrerit nisi. Praesent a hendrerit urna. In non imperdiet elit, sed molestie odio. Duis semper ex tempus massa ullamcorper, eget elementum orci ornare. Proin eu quam et est sollicitudin interdum. Phasellus eleifend, nisl in condimentum tempus, ligula elit ornare nulla, id varius dolor nisl a purus. Vivamus non lectus venenatis, tristique magna at, accumsan massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce nec lacinia eros. Aenean ac or
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
<input id="toggle1" class="toggle" type="checkbox" style="display: none;" name="dropdown" />
<label class="form-label" style="width: 100%;border-bottom: 1px solid #232B2B;display: flex;justify-content: space-between;font-size: 32px;color: inherit;font-weight: 300;line-height: 48px;cursor: pointer;user-select: none;" for="toggle1">
<span>Lorem ipsum</span><span class="icon" style="width: 32px;display: flex;justify-content: center;color: inherit;"></span>
</label>
<div class="content" style="display: grid;grid-template-rows: 0fr;transition: 250ms grid-template-rows ease;">
<div style="overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo. Fusce malesuada vulputate faucibus. Integer in hendrerit nisi. Praesent a hendrerit urna. In non imperdiet elit, sed molestie odio. Duis semper ex tempus massa ullamcorper, eget elementum orci ornare. Proin eu quam et est sollicitudin interdum. Phasellus eleifend, nisl in condimentum tempus, ligula elit ornare nulla, id varius dolor nisl a purus. Vivamus non lectus venenatis, tristique magna at, accumsan massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce nec lacinia eros. Aenean ac or
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
<input id="toggle2" class="toggle" type="checkbox" style="display: none;" name="dropdown" />
<label class="form-label" style="width: 100%;border-bottom: 1px solid #232B2B;display: flex;justify-content: space-between;font-size: 32px;color: inherit;font-weight: 300;line-height: 48px;cursor: pointer;user-select: none;" for="toggle2">
<span>Lorem ipsum</span><span class="icon" style="width: 32px;display: flex;justify-content: center;color: inherit;"></span>
</label>
<div class="content" style="display: grid;grid-template-rows: 0fr;transition: 250ms grid-template-rows ease;">
<div style="overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui. Nullam vel eros sit amet arcu vestibulum accumsan in in leo. Fusce malesuada vulputate faucibus. Integer in hendrerit nisi. Praesent a hendrerit urna. In non imperdiet elit, sed molestie odio. Duis semper ex tempus massa ullamcorper, eget elementum orci ornare. Proin eu quam et est sollicitudin interdum. Phasellus eleifend, nisl in condimentum tempus, ligula elit ornare nulla, id varius dolor nisl a purus. Vivamus non lectus venenatis, tristique magna at, accumsan massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce nec lacinia eros. Aenean ac or
</div>
</div>
</div>