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

Question

[kingdimidze]

Как реализовать плавный выпадающий текст как в правом нижнем углу. С visibility:none не получается.(остается пустое место)

Comments

[Антон Литвиненко]

Не бывает visibility : none

Answer 1

[Elena Fire]

Плавный выпадающей текст - это аккордеон, в данном случае.
Внутри вашего пункта со стрелкой лежит 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;
}