Just an update, this has now been resolved. For anyone that wants to do something similar in the future, the full code is here.
HTML here
<div class="row">
<div class="col">
<h1>Heading here</b></h1>
<div class="tabs">
<div class="tab">
<input type="checkbox" id="chck1">
<label class="tab-label" for="chck1">
<h2>Title here.
</h2>
</label>
<div class="tab-content">
<div class="container">
<img src="URL" class="container__image"> <div class="container__text">
<p>
Some internal content here.
</p>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="checkbox" id="chck2">
<label class="tab-label" for="chck2"><h2>
A title here</h2></label>
<div class="tab-content">
<div class="container">
<img src="URL" class="container__image"> <div class="container__text">
<p>
Some internal content here.
</p>
</div>
</div>
</div>
</div>
/*CSS here*/
// General
input {
position: ;
opacity: 0;
z-index: -1;
}
// Layout
.row {
display:flex;
.col {
flex:1;
&:last-child {
margin-left: 1em;
}
}
}
/* Accordion styles */
.tabs {
border-radius: 0px;
overflow: hidden;
}
.tab {
width: 100%;
color: ;
overflow: hidden;
&-label {
display: flex;
padding: 1em;
background: ;
justify-content: space-between;
font-weight: bold;
border-bottom: 1px solid #f7b8a1;
padding-bottom:20px;
cursor: pointer;
/* Icon */
&:hover {
background: ;
}
&::after {
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
}
}
&-content {
max-height: 0;
padding: 0 0em;
color: ;
background: ;
transition: all .35s;
}
&-close {
display: flex;
justify-content: flex-end;
padding: 1em;
font-size: 0.75em;
background: ;
cursor: pointer;
&:hover {
background: ;
}
}
}
// :checked
input:checked {
+ .tab-label {
background: ;
&::after {
transform: rotate(90deg);
}
}
~ .tab-content {
max-height: 150vh;
padding-top: 10px;
}
}
.container {
&__image {
display: inline-block;
vertical-align: top;
width: 25%;
margin-right: 25px;
position: relative;
min-width: 200px;
margin-bottom: 20px;
}
&__text {
display: inline-block;
width: 60%;
font-size: 1.3em;
overflow: visible;
@media (max-width: 1000px) {
width: 100%;
}
}
}
