Как создать раскрывающуюся страницу в html

Question

Я был на этом сайте, и у них была эта часть, где вы нажали на этот значок внизу страницы, и под ним выпадал новый раздел страницы на той же веб-странице. Может ли кто-нибудь сказать мне, как это делается. Это скрытый iframe, который используется? Мне просто нужно знать, что искать, чтобы узнать, как это сделать. Я искал скрытую выпадающую страницу, но до сих пор я просто нахожу учебники о том, как делать выпадающие ссылки навигации.

Answer 1

Скрытый iframe используется для вывода контента с другого сайта. Когда вы показываете части своего собственного сайта, вы можете просто скрыть эти части с помощью CSS и показать их на определенных событиях, например, наведите курсор, изменение класса, щелчок мышью и т. Д.

Вот суперпростой пример с использованием height: 0, чтобы скрыть он, а затем изменить класс будет изменять высоту до 200 пикселей:

function reveal(){ 
 
    document.getElementById('h').className = 'open'; 
 
}

div {height: 50px; background: green; color: white;} 
 
#h {height: 0; transition: height 1s linear; background: blue} 
 
#h.open {height: 50px}

<div>I'm a regular part of the page<br><button onclick="reveal()">Open the "hidden" part</button></div> 
 
<div id="h">I'm the hidden part of the page</div>

этого должно быть достаточно, чтобы вы начали - есть миллионы ресурсов на эту тему доступны в Интернете.