0

Хотел сделать простой аккордион на HTML (через checkbox) и CSS/SASS/SCSS, но где-то допускаю ошибку, думаю, в CSS, из-за которой, при нажатии на "Заголовок" (см. в коде) не становится видимым параграф. Где я допустил ошибку?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>#</title>
</head>
<body>
    <div>
        <input class="input" type="checkbox">
        <label class="label" for="input">Заголовок</label>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum hic 
            veniam illum delectus! Quisquam consequuntur aspernatur facilis quod fugiat, 
            quia odio alias illum temporibus suscipit! Neque possimus nemo ex!
        </p>
    </div>
</body>
</html>

CSS:

div {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.input {
     position: absolute;
     opacity: 0;
     z-index: -1;
}
.label {
    text-align: left;
    font-family: sans-serif;
    background-color: red;
    display: block;
    padding: 5px;
    margin-bottom: 0px;
}
.label:hover {
    cursor: pointer;
}
p {
    text-align: justify;
    font-family: sans-serif;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    margin-top: 0px;
    display: none;
}
.input:checked ~ p {
    display: block;
}
1
  • то, что вы хотите, делается через <details> безо всякого CSS. Проще и быть не может.
    – DiD
    1 янв 2022 в 5:24

1 ответ 1

0

Необходимо добавить для input --> id="input"

Пример

div {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  position: relative;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  text-align: left;
  font-family: sans-serif;
  background-color: red;
  display: block;
  padding: 5px;
  margin-bottom: 0px;
}

.label:hover {
  cursor: pointer;
}

p {
  text-align: justify;
  font-family: sans-serif;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  margin-top: 0px;
  display: none;
}

.input:checked~p {
  display: block;
}
<div>    
  <input class="input" id="input" type="checkbox">
  <label class="label" for="input">Заголовок</label>  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum hic veniam illum delectus! Quisquam consequuntur aspernatur facilis quod fugiat, quia odio alias illum temporibus suscipit! Neque possimus nemo ex!
  </p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.