-2

I was visiting this website and they had this one part where you clicked on this icon at the bottom of the page and underneath it would drop a new page section on the same web page. Could someone tell me how this is done.Is it a hidden iframe that is being used? I just need to know what to search for to learn how to do this. I've searched hidden drop down page but so far I'm just finding tutorials on how to do drop down navigation links.

AdamV
  • 167
  • 1
  • 11
  • related: http://stackoverflow.com/questions/15095933/pure-css-collapse-expand-div – NightShadeQueen Jul 12 '15 at 22:35
  • Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow – Marcin Orlowski Jul 12 '15 at 22:35
  • You are not going to make friends asking questions like this. If you know some HTML you can always check your websites source code. Anyways, check the 'display' property in CSS – Joep Jul 12 '15 at 22:40

1 Answers1

1

Hidden iframe is usully used to pull content from another website. When revealing parts of your own website, you can simply hide those parts with CSS and unhide them on certain events, like hover, class change, mouse click, etc...

Here's a super-simple example using height: 0 to hide it, and then changing the class would modify the height to 200 pixels:

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>

This should be enough to get you started - there are millions of resources on this topic available online.

Shomz
  • 37,421
  • 4
  • 57
  • 85