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  for="season1">
    <h3 >Season 1</h3>
    <i ></i>
    <div >
    </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.

CodePudding user response：

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  for="season1">
    <h3 >Season 1</h3>
    <i ></i>
    <div >
    </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 >Season 1</h3>
  </summary>
  <article >
    Episodes1-grid content
  </article>
</details>