I'm experimenting with creating an accordion-style layout that transitions to an accordion on smaller screens, as shown by resizing the snippet attached to this question. I'm using flex to establish a sticky header, which is currently only applied to the "Developer" label using position: sticky; however, it doesn't seem to be working as intended. I'm relatively new to flex and I'm mainly trying to utilize it for its sticky feature. I would appreciate any tips or tricks! I'm aiming to stick with just HTML/CSS for this.
.featured-table-container {
display: flex;
flex-direction: column;
}
.featured-table-collapse {
cursor: pointer;
display: block;
background: #cdf;
}
.featured-table-collapse+input {
display: none;
/* hide the checkboxes */
}
.featured-sticky {
position: sticky;
}
/*** Text/Content Style ***/
.featured-table-content {
font-size: 20px;
/*to fill out content so I can test sticky */
}
/*** MEDIA QUERIES ***/
@media only screen and (max-width: 760px) {
/** Makes table collapse **/
.featured-table-collapse+input+.featured-table-content {
display: none;
}
.featured-table-collapse+input:checked+.featured-table-content {
display: block;
}
}<div class="featured-table-container">
<!-- Container that applies flex -->
<label class="featured-table-collapse featured-sticky" for="_1">
<!-- class = featured-sticky for position:sticky; -->
Developer
</label>
<input id="_1" type="checkbox">
<div class="featured-table-content">
Lorem Ipsum text...
</div>
<label class="featured-table-collapse" for="_2">
Foundation
</label>
<input id="_2" type="checkbox">
<div class="featured-table-content">Content 2</div>
<label class="featured-table-collapse" for="_3">
Accelerator
</label>
<input id="_3" type="checkbox">
<div class="featured-table-content">Content 3</div>
<label class="featured-table-collapse" for="_4">
Enterprise
</label>
<input id="_4" type="checkbox">
<div class="featured-table-content">Content 4</div>
<!-- Table container end -->
</div