How can I make only a certain part of a label clickable?

Question

I'm working on a project and I have an accordion list with input checkbox and labels. The problem is, the label makes larger when I click it, revealing the content inside it, but when I click the content, the label checks the input, hiding the content inside the label, so, my idea was that only a certain part of the label (4em), can be clickable to activate the input checkbox, and the rest was only clickable for the objects inside it, without activating the input checkbox.

For a better idea here's my code:

<input id="season1" type="checkbox">
<label class="ls1" for="season1">
    <h3 class="first">Season 1</h3>
    <i class="fas fa-angle-right"></i>
    <div class="episodes1-grid">
    </div>
</label>

input[type="checkbox"] {
    display: none;
}

label {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 4em;
    transition: height 0.8s ease-in-out;
}

Maybe this doesn't even require the use of javascript and it's my problem in the use of a label in the first place.

Answer 1

You can use pointer-events: none on your label, and reset it on the elements you want clickable:

 input[type="checkbox"] { display: none; } label { display: flex; flex-direction: column; pointer-events: none; position: relative; cursor: pointer; height: 4em; transition: height 0.8s ease-in-out; } label h3 { pointer-events: auto; } input[type="checkbox"]:checked~label { color: red; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <input id="season1" type="checkbox" /> <label class="ls1" for="season1"> <h3 class="first">Season 1</h3> <i class="fas fa-angle-right"></i> <div class="episodes1-grid"> </div> </label>

Depending on your scenario though it's probably better to use the native HTML <details> element:

 h3 { margin-block: .3em; } summary { cursor: pointer; }

 <details> <summary> <h3 class="first">Season 1</h3> </summary> <article class="episodes1-grid"> Episodes1-grid content </article> </details>