Estoy trabajando en un proyecto y tengo una lista de acordeón con casilla de verificación de entrada y etiquetas. El problema es que la etiqueta se hace más grande cuando hago clic en ella, revelando el contenido dentro de ella, pero cuando hago clic en el contenido, la etiqueta verifica la entrada, ocultando el contenido dentro de la etiqueta, entonces, mi idea era que solo una cierta parte de se puede hacer clic en la etiqueta (4em) para activar la casilla de verificación de entrada, y solo se puede hacer clic en el resto para los objetos dentro de ella, sin activar la casilla de verificación de entrada.

Para una mejor idea aquí está mi código:

 <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; }

Tal vez esto ni siquiera requiera el uso de javascript y es mi problema en el uso de una etiqueta en primer lugar.