عالم الانترنات و الحاسوب

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>
<!--  above </head> -->
---------------------------------------------------------------------------------------------------------------
<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#1" >heading 1</a></li>
<li><a href="#2">heading2 </a></li>
<li><a href="#3">Subheading 1</a></li>
<li><a href="#4">Subheading 2</a></li>
<li><a href="#5">Minor heading </a></li>
</ol>
</div>
</div>

-------------------------------------------------
id="1"