@kingdimidze

Как сделать выпадающий текст после нажатия на кнопку?

Как реализовать плавный выпадающий текст как в правом нижнем углу. С visibility:none не получается.(остается пустое место)
608d23fe4d81e301527937.jpeg
  • Вопрос задан
  • 21 просмотр
Пригласить эксперта
Ответы на вопрос 1
BormotunJedy
@BormotunJedy
Верстальщик
Плавный выпадающей текст - это аккордеон, в данном случае.
Внутри вашего пункта со стрелкой лежит div с описанием. Нажатие на строку вызывает демонстрацию вложенного div. Примерно так:
<ul>
     <li class="punkt-so-strelkoi">
           <label for="punkt-1" class="down-accord">Click here</label>
           <input type="ckeckbox" id="punkt-1">
           <div class="inner-accord">It's a trick to get your attention! Ho-ho-ho!</div>
     </li>
     <li class="punkt-so-strelkoi">
           <label for="punkt-2" class="down-accord">And here too</label>
           <input type="ckeckbox" id="punkt-2">
           <div class="inner-accord">It's a trick to get your attention! Ho-ho-ho!</div>
     </li>
</ul>

.down-accord {
    text-decoration: none;
    cursor: pointer;
}

li {
   position: relative;
}

#punkt-1, #punkt-2 {
   position: absolute;
   left: -9999px;
}

#punkt-1:checked+.inner-accord,
#punkt-2:checked+.inner-accord {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    top: 100%;
    left: 0;
}
input[type="checkbox"] {
    position: fixed;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы