intro: Hi All! First of all: I'm an absolute newbie 😄 and I don't write in CSS or HTML. So you may see some egregious pieces of code below. This is because I have mostly copy and pasted from other helpful bits on forums, trying to cobble together what I need.
problem: I have borrowed some code to add images inside of an accordion. While it worked for the original writer, I'm finding that my accordion will not fully close whenever an image is inside of it. Basically, it only partially closes--like a garage door on a box.
desired solution: I would love it if someone could point out what I need to change in my code so that the accordion fully closes, irrespective of how many images I may have inserted into it. Thanks in advance! Code below.
HTML Code:
<div class="row">
<div class="col">
<h1>Project Name</b></h1>
<div class="tabs">
<div class="tab">
<input type="checkbox" id="chck1">
<label class="tab-label" for="chck1">
<h2>skills & tools
</h2>
</label>
<div class="tab-content">
<p>hardware: [some text here] </p>
<p>sw: [some text here] </p>
</div>
</div>
<div class="tab">
<input type="checkbox" id="chck2">
<label class="tab-label" for="chck2">
<h2>background</h2>
</label>
<div class="tab-content">
<p>Hardware development is a complex and integral part of the technology industry. It encompasses the entire process of designing and building physical electronic components that power the devices we use daily. Skilled engineers in this field focus on optimizing performance, reducing power consumption, and enhancing the reliability of hardware components to keep up with the ever-increasing demands of modern technology. The hardware development lifecycle includes stages like initial design, prototyping, rigorous testing, and iterative improvements to ensure that the hardware meets the specified requirements and performance goals. The continuous advancement of hardware development has led to the creation of smaller and more powerful devices, such as smartphones, laptops, and wearable technology, which have seamlessly integrated into our lives, making our daily tasks more efficient and convenient. Collaboration between hardware and software development teams is vital to ensure that the hardware can adequately support the software's functions and features, resulting in the creation of user-friendly and high-performing technology products.</p>
</div>
</div>
</div>
<div class="tab">
<input type="checkbox" id="chck3">
<label class="tab-label" for="chck3">
<h2>the work</h2>
</label>
<div class="tab-content">
<head>
<style>
.image1-container {
float: left;
margin-right: 20px;
width: 30%;
}
</style>
</head>
<body>
<div class="image1-container">
<img src="https://static1.squarespace.com/static/6527113a60db074ffc45fc0a/t/652f103802c4741089af3c68/1697583161762/pic4.png" alt="Rectangular Image">
</div>
<p>Thomas Co-founded P-THREE in 2019 after working as head of Leisure & Restaurants at Cushman & Wakefield for 13 years.</p>
<p>Thomas has worked on projects across the UK and Europe including Battersea Power Station, Waterloo.London, Savarin Prague, Potsdamer Platz Berlin, Trocadero Estate, Wembley Park and Kensington Olympia. Thomas has advised private equity groups on over £1billion of acquisitions and retained mandates for Third Space, Wahaca, Rosa’s Thai, Chipotle and Puttshack.</p>
<p>Thomas is a member of RICS and a Committee Member of the Leisure Property Forum.</p>
</body>
</div>
</div>
</div>
</div>
CSS Code:
/*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%;
}
}
}
.image1{
color:transparent;
background-image:url(https://static1.squarespace.com/static/6527113a60db074ffc45fc0a/t/652f103802c4741089af3c68/1697583161762/pic4.png);
background-size:cover;
background-repeat:no-repeat;
}
.accordion {
background-color: #525252;
color: #fff;
border: solid 1px #fff;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
transition: 0.4s;
}
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 20px;
background-color: #fff;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
