Как поэтапно раскрыть/скрыть пост?

от
prokoding.ru > JavaScript > Как поэтапно раскрыть/скрыть пост?

Для того чтобы поэтапно раскрывать или скрывать пост на веб-странице с использованием JavaScript, можно использовать анимацию и методы CSS, такие как transition. Ниже представлен подробный пример реализации данного функционала:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <button onclick="togglePost()">Показать/Скрыть пост</button>
    <div id="post" class="hidden">
        <p>Содержимое вашего поста здесь...</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.visible {
    max-height: 500px; /* Высота, до которой раскрывается содержимое поста */
    transition: max-height 0.5s ease;
}

JavaScript (script.js):

function togglePost() {
    var post = document.getElementById('post');
    
    if (post.classList.contains('hidden')) {
        post.classList.remove('hidden');
        post.classList.add('visible');
    } else {
        post.classList.remove('visible');
        post.classList.add('hidden');
    }
}

В данном примере при нажатии на кнопку "Показать/Скрыть пост" вызывается функция togglePost(), которая переключает класс элемента с постом между "hidden" и "visible". Класс "hidden" применяет стили для скрытия содержимого поста (нулевая высота с отключенным overflow), а класс "visible" применяет стили для постепенного раскрытия содержимого поста (указанная максимальная высота с анимацией).

Таким образом, при каждом последующем клике на кнопку пост будет поэтапно раскрываться или скрываться с помощью анимации.