How to create accordion using checkbox and radio buttons - html

Question

I am creating a project in which we can see the assignment and download the assignment given by college.
I used the accordion method for that....
In which 5-6 subject are there and when you click on that subject it expands and shows the assignment,from that expanded view you can download the document or view it.....
I am also adding some buttons around it like "Download" "view" "Mark as favorite" for that assignment.
I have used the checkbox for expanding the accordions, now the main problem is that When I Click anywhere on that subject 'div' it expands, but i want that it should expand only when user click on that "plus" icon ( shown at a right side )
So that all the operations like "View Document","Download Document","Mark as favorite" work on the buttons that added on the right side...
I just want that when someone click on '+' icon it should expand (Not when someone click on whole div)
Check the whole code at Codepen
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
::selection{
background: rgb(0,123,255,0.3);
}
.wrapper{
max-width: 600px;
padding: 0 20px;
}
.wrapper .parent-tab,
.wrapper .child-tab{
margin-bottom: 8px;
border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.wrapper .parent-tab label,
.wrapper .child-tab label{
background: #007bff;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: 3px;
position: relative;
z-index: 99;
transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover{
background: #006fe6;
}
.parent-tab input:checked ~ label,
.child-tab input:checked ~ label{
border-radius: 3px 3px 0 0;
background: #006fe6;
}
.wrapper label span{
color: #fff;
font-size: 18px;
font-weight: 500;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span{
font-size: 17px;
}
.parent-tab label .icon{
position: relative;
height: 30px;
width: 30px;
font-size: 15px;
color: #007bff;
display: block;
background: #fff;
border-radius: 50%;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon{
height: 27px;
width: 27px;
}
.parent-tab label .icon i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.child-tab input:checked ~ label .icon i:before{
content: '\f068';
}
.wrapper .parent-tab .content,
.wrapper .child-tab .sub-content{
max-height: 0px;
overflow: hidden;
background: #fff;
border-radius: 0 0 3px 3px;
transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.child-tab input:checked ~ .sub-content{
max-height: 100vh;
}
.tab-3 input:checked ~ .content{
padding: 15px 20px;
}
.parent-tab .content p,
.child-tab .sub-content p{
padding: 15px 20px;
font-size: 16px;
}
.child-tab .sub-content p{
font-size: 15px;
}
input[type="radio"],
input[type="checkbox"]{
display: none;
}
.num1{
text-align: center;
margin-bottom: 20px;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="wrapper">
<h2 class="num1">Assignment At Glance</h2>
<!-- Accordion Heading One -->
<div class="parent-tab">
<input type="checkbox" name="tab" id="tab-1" checked>
<label for="tab-1">
<span>Engineering Physics</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
<!-- Accordion Heading Two -->
<div class="parent-tab">
<input type="checkbox" name="tab" id="tab-2">
<label for="tab-2">
<span>Engineering Graphics</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
<!-- Accordion Heading Three -->
<div class="parent-tab tab-3">
<input type="checkbox" name="tab" id="tab-3">
<label for="tab-3" class="tab-3">
<span>PPS</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
• Assignment Completed : 3 <br>
• Assignment Remaining : 1 <br>
<br>
<!-- Sub Heading One -->
<div class="child-tab">
<input type="checkbox" name="sub-tab" id="tab-4">
<label for="tab-4">
<span>Algorithms</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
<!-- Sub Heading Two -->
<div class="child-tab">
<input type="checkbox" name="sub-tab" id="tab-5">
<label for="tab-5">
<span>Python</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
</div>
</div>
<!-- Accordion Heading Four -->
<div class="parent-tab">
<input type="checkbox" name="tab" id="tab-6">
<label for="tab-6">
<span>Accordion Heading Four</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
</div>

Answer 1

The Problem
When you are making the blue bars, they are wrapped in a label. When you click the label it is expanding the box because it checks the checkbox.
The Solution
All you need to do is to make make it so that the blue bar doesn't register clicks, but the icon does. To do this you can use the pointer-evens property. The code should look like this
.parent-tab label{
pointer-events: none;
}
.parent-tab .icon{
pointer-events: auto;
}
Disclaimer: I didn't come up with this answer, #ManirajMurugan did. (See the first comment on the question).