Free Favicon: March 2016

<!doctype html>
<html lang="en-US">
<head>
<title>HTML 5 Compliant Toggle (Show/Hide) DIVs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="http://example.com/div-hide-show.html">
<meta content="div, collapse, hide, show" name=keywords>
<meta content="This is the html and javascript for items which can be toggled inside an iframe." name=description>
<meta content="index,follow" name=robots>
<style>html {overflow:hidden} body {scrollbar-arrow-color: #ffffff; font-family: verdana; scrollbar-darkshadow-color: #000000; scrollbar-base-color: #050f2d; background-color: #000000} a {color: #535dcd; text-decoration:none}</style>

</head>

<div style="background:transparent; font-size:11px; line-height: 1; color: #cccccc; border: 0px #000000 solid; width:300px; height:100px; overflow:auto; overflow-x:hidden">

<a id="displayText01" href="javascript:toggle('toggleText01');">SECTION 01</a>
<div id="toggleText01" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText02" href="javascript:toggle('toggleText02');">SECTION 02</a>
<div id="toggleText02" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText03" href="javascript:toggle('toggleText03');">SECTION 03</a>
<div id="toggleText03" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText04" href="javascript:toggle('toggleText04');">SECTION 04</a>
<div id="toggleText04" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText05" href="javascript:toggle('toggleText05');">SECTION 05</a>
<div id="toggleText05" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText06" href="javascript:toggle('toggleText06');">SECTION 06</a>
<div id="toggleText06" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText07" href="javascript:toggle('toggleText07');">SECTION 07</a>
<div id="toggleText07" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText08" href="javascript:toggle('toggleText08');">SECTION 08</a>
<div id="toggleText08" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

<a id="displayText09" href="javascript:toggle('toggleText09');">SECTION 09</a>
<div id="toggleText09" style="display:none; background: transparent; font-size:11px; line-height: 1; color: #cccccc; border: 1px #000818 solid; width: 82px; height:100px; overflow:auto; overflow-x:hidden">
</div>

</div>

</body>
</html>

Here is the HTML5 code for embedding the iframe on a page:

A working sample of this coding is incorporated on the right side of this blog.

html {overflow:hidden} is included in the style tags, which prevents scrolling. However, a div tag was added to allow for the desired scrolling feature for "y" (vertical) and not "x" (horizontal), i.e., overflow:auto; overflow-x:hidden.

HTML5 Compliant Toggle (Hide/Show) DIV