TOC non AMP

by kompiajaib

HTML

<h1>Table of Contents For Blogger</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare nisi iaculis elementum venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas interdum neque convallis magna vulputate molestie. Nam congue egestas dui, ut elementum velit porttitor eu. Etiam scelerisque, libero sit amet aliquet laoreet, lacus erat vulputate arcu, non rhoncus sapien ex sed tortor. Donec finibus malesuada nisl egestas sollicitudin. Morbi ultrices sodales tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
<br />
<div id="btn_toc" 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">
<dl>
  <dt>1. <a href="#toc_1" title="Lorem Ipsum">Lorem Ipsum</a></dt>
  <dd>1.1. <a href="#toc_1-1" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></dd>
  <dd>1.2. <a href="#toc_1-2" title="Mauris consectetur">Mauris consectetur</a></dd>
  <dt>2. <a href="#toc_2" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></dt>
  <dd>2.1. <a href="#toc_2-1" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></dd>
  <dt>3. <a href="#toc_3" title="Lorem Ipsum">Lorem Ipsum</a></dt>
  <dt>4. <a href="#toc_4" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></dt>
  <dt>5. <a href="#toc_5" title="Mauris consectetur">Mauris consectetur</a></dt>
  <dt>6. <a href="#toc_6" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></dt>
  <dt>7. <a href="#toc_7" title="Donec...

CSS

h1 {
      margin: 16px;
    }
    #btn_toc{font-weight:bold;cursor:pointer}
    #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
    #btn_toc svg{vertical-align:middle}
    #toc li,.back_toc{cursor:pointer}
    #toc{display:grid}
    #toc dd{-webkit-margin-start:15px;}
    :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}