I’m currently dealing with anchor links positioned at the top of my page that navigate to scroll-out infoboxes located at the bottom. When a user clicks on one of these anchors, it directs them to the corresponding box below; however, I also want these boxes to automatically expand upon clicking.
Is there a solution to this issue?
The opening and closing of these boxes are controlled by the following CSS properties:
Closed state:
.collapsible-factuur-content {
max-height: 0px;
overflow: hidden;
transition: all 0.4s ease-out;
}
Opened state:
.toggle:checked+h3+.collapsible-factuur-content, .toggle:checked+h5+.collapsible-factuur-content {
max-height: 300vh;
margin-top: 1em;
margin-bottom: 2em;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
To summarize, the anchor should link to the box below #section-details-general and apply the specified CSS values for the opened state mentioned above.
#overlay {
display: none;
position: absolute;
top: 0;
bottom: 0;
background: #99999945;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 100;
transition: all ease-in-out .2s;
}
#popup {
display: none;
position: absolute;
top: 25%;
background: #fff;
width: 80%;
margin-left: 10%;
z-index: 200;
border-left: 4px solid #def2a6;
box-shadow: 0 2px 4px rgb(0 0 0 / 16%);
border-radius: 4px;
}
#popupclose {
float: right;
padding: 2px;
cursor: pointer;
}
.popupcontent {
padding: 10px;
}
.popupcontent p {
margin-left: 20px;
margin-top: 10px;
color: #586874;
}
#button {
cursor: pointer;
}
.textdetails ul {
list-style-type: disc;
}
.textdetails section {
padding-top: 0;
padding-bottom: 20px;
}
.textdetails label {
cursor: pointer;
transition: all 0.1s ease-in;
display: flex;
align-items: center;
}
.textdetails label.gp-product {
width: 100%;
height: 80px;
background: #def2a6 0 0 no-repeat padding-box;
box-shadow: 0 2px 4px rgb(0 0 0 / 16%);
border-radius: 4px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
text-align: left;
font-family: Rubik;
font-weight: 700;
color: #005e75;
padding: 16px 0 16px 72px;
line-height: 20px;
}
.textdetails label.gp-product i {
font-size: 32px;
margin-left: -45px;
margin-right: 50px;
width: 30px;
display: flex;
justify-content: center;
}
.textdetails label.gp-product:after {
width: 24px;
height: 24px;
display: flex;
justify-content: flex-end;
flex-grow: 1;
font-size: 24px;
color: #005e75;
content: "";
font-family: Font Awesome\ 5 Pro;
font-weight: 900;
transform: rotate(0deg);
transition: all .3s ease-in-out;
right: 30px;
position: absolute;
}
.textdetails label span {
flex: 1;
margin-left: 10px;
}
.textdetails input[type="checkbox"] {
display: none;
}
.collapsible-factuur-content {
max-height: 0px;
overflow: hidden;
transition: all 0.4s ease-out;
}
.toggle:checked+h3+.collapsible-factuur-content,
.toggle:checked+h5+.collapsible-factuur-content {
max-height: 300vh;
margin-top: 1em;
margin-bottom: 2em;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}<p style="margin-bottom: 500px;">
<a class="button btn--tertiary" href="#section-details-general">Link to the block</a><br>
<mark>👆this is an anchor to the block below, which should also be opened up upon clicking.</mark><br><br><br>
<mark>In the actual enviroment there is quite a big space in between these two blocks (with images, text etc)</mark>
</p>
<section class="textdetails" style="margin-bottom: 250px;">
<!-- Details general -->
<section id=" section-details-general"><input class="toggle" id="collapsible-details-general" type="checkbox"
data-hj-masked="">
<h3>
<label class="gp-product" for="collapsible-details-general">
<i class="fas fa-info-circle"></i>
<h4>Open me</h4>
</label>
</h3>
<div class="collapsible-factuur-content" id="details-general">
<p><mark>More info here</mark></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus nunc ac arcu venenatis finibus id
consectetur odio. Nam eget mauris efficitur, laoreet augue vel, efficitur arcu. Nullam sed arcu suscipit
massa sodales ultrices vitae sodales odio. Quisque nisi orci, rutrum sit amet porta malesuada, commodo
at mi. Aliquam molestie purus in ullamcorper rutrum. Nullam mollis dui sed arcu bibendum lobortis vitae
in quam. Phasellus faucibus odio tellus, a placerat nunc malesuada sit amet. Morbi ornare sagittis
rhoncus. Proin sagittis, nunc eget porttitor placerat, ipsum tortor elementum mi, sed mollis libero
magna efficitur velit. Donec sed ultrices enim. </p>
</div>
</section>
</section>