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 that you have read and understand our privacy policy and code of conduct.

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