Как скрыть и показать элементы с помощью href в html

Question

У меня есть неупорядоченный список элементов, который нужно отображать один за другим, как древовидную структуру.

Нажав раздел 3, я хотел показать предложения и безопасность (основной список). При нажатии на «Предложение» я хотел отобразить «Предложение 1, 2, 3, 4». То же самое относится и к списку безопасности.

Поскольку я не могу использовать javascript, я пытался получить его через css, но он не работает.

Может мне кто-нибудь помочь?

 #Sec3 {
            display: none;
        }
        #Sec3:target {
            display: block;
        }
    
        #SubSec1:target {
            display: block;
        } 
        #SubSec2:target {
            display: block;
        }

 <ol>
            <li><a href="#Sec1"><span style="font-family: helvetica; font-size: 12pt;">Sample Event Flow</span></a></li>
            <li><a href="#Sec2"><span style="font-family: helvetica; font-size: 12pt;">Pre-requisite</span></a></li>
            <li><a href="#Sec3"><span style="font-family: helvetica; font-size: 12pt;">Sample Offerings &amp; On-boarding Process for Proof of Concept or Project</span></a></li>
            <ul id="Sec3">
            <li><a href="#SubSec1"><span style="font-family: helvetica; font-size: 12pt;">Offerings</span></a></li>
            <ul id="SubSec1">
            <li><span style="font-family: helvetica; font-size: 12pt;">Offering 1 -  Publish Events Real Time</span></li>
            <li><span style="font-family: helvetica; font-size: 12pt;">Offering 2 - Subscribe Events Real Time</span></li>
            <li><span style="font-family: helvetica; font-size: 12pt;">Offering 3 - Publish and Enrich Events in Real Time</span></li>
            <li><span style="font-family: helvetica; font-size: 12pt;">Offering 4 -  Event Monitoring and Production Support</span></li>
            </ul>
            <li><a href="#SubSec2"><span style="font-family: helvetica; font-size: 12pt;">Security</span></a></li>
            <ul>
            <li id="SubSec2"><span style="font-family: helvetica; font-size: 12pt;">Sample App Secure Integration Options / Process</span></li>
            </ul>
            </ul>
            <li><a href="#Sec4"><span style="font-family: helvetica; font-size: 12pt;">Sample Catalogue - MetaLine</span></a></li>
            <li><a href="#Sec5"><span style="font-family: helvetica; font-size: 12pt;">Sample Team</span></a></li>
            <li><span style="font-family: helvetica; font-size: 12pt;"><a href="#Sec6">FAQ</a></span></li>
            </ol>

Answer 1

Мне удалось это выяснить.

#Sec3 {
            display: none;
        }
        #Sec3:target {
            display: block;
        }
        label {
            cursor: pointer;
            text-decoration: underline;
        }
        .sub-menu {
            display: block;
            max-height: 0;
            transition: max-height 0.3s;
            overflow: hidden;
            will-change: max-height;
        }

        input:checked ~ .sub-menu {
        max-height: 100px;
        }

 <ol>
            <li><a href="#Sec1"><span style="font-family: helvetica; font-size: 12pt;">Sample Event Flow</span></a></li>
            <li><a href="#Sec2"><span style="font-family: helvetica; font-size: 12pt;">Pre-requisite</span></a></li>
            <li><a href="#Sec3"><span style="font-family: helvetica; font-size: 12pt;">Sample Offerings &amp; On-boarding Process for Proof of Concept or Project</span></a></li>
            <ul id="Sec3">
            <li><label style="font-family: helvetica; font-size: 12pt;" for="parent1">Offerings</label>
                <input type="radio" id="parent1" hidden name="sub-menu-trigger">
                <ul class="sub-menu">
                    <li><span style="font-family: helvetica; font-size: 12pt;">Offering 1 -  Publish Events Real Time</span></li>
                    <li><span style="font-family: helvetica; font-size: 12pt;">Offering 2 - Subscribe Events Real Time</span></li>
                    <li><span style="font-family: helvetica; font-size: 12pt;">Offering 3 - Publish and Enrich Events in Real Time</span></li>
                    <li><span style="font-family: helvetica; font-size: 12pt;">Offering 4 -  Event Monitoring and Production Support</span></li>
                </ul>
            </li>
            <li><label for="parent2" style="font-family: helvetica; font-size: 12pt">Security</label>
                <input type="radio" id="parent2" hidden name="sub-menu-trigger">
                <ul class="sub-menu">
                    <li><span style="font-family: helvetica; font-size: 12pt;">Sample App Secure Integration Options / Process</span></li>
                </ul>
            </li>
            </ul>
            <li><a href="#Sec4"><span style="font-family: helvetica; font-size: 12pt;">Sample Catalogue - MetaLine</span></a></li>
            <li><a href="#Sec5"><span style="font-family: helvetica; font-size: 12pt;">Sample Team</span></a></li>
            <li><span style="font-family: helvetica; font-size: 12pt;"><a href="#Sec6">FAQ</a></span></li>
            </ol>

Answer 2

      #SubSec1, #SubSec2 {
          display: none;
          z-index: -2;
          position: relative
      }

      button {
        position: relative;
        display: block;
        z-index: 1;
        outline: none;
        border: none;
        font-family: helvetica;
        font-size: 12pt;
        background: transparent;
        text-decoration: underline;
        height:19px;
        text-align:left;
        float: none;
        margin: none;
        left: -7px;
        cursor: pointer
      }

      button > li:first-of-type {
        display:list-item;
        padding: none;
        margin: none;
        left: -2px
      }

      ul#Sec3 li > a  {
        position: relative;
        z-index: -1;
        height: 1px;
        color:blue
      }

      button#SubSec1_btn + #SubSec1:active,
      button#SubSec1_btn:focus + #SubSec1,
      button#SubSec2_btn + #SubSec2:active,
      button#SubSec2_btn:focus + #SubSec2 {
          display: block;
      }

      button#SubSec1_btn:focus,
      button#SubSec1_btn:focus > *,
      button#SubSec2_btn:focus,
      button#SubSec2_btn:focus > *  {
          z-index: -2;
          cursor: pointer
      }

      #SubSec1:active, #SubSec2:active {
        z-index: 4
        cursor: pointer
      }

      <ol>
        <li>
            <a href="#Sec1"><span style="font-family: helvetica; font-size: 12pt;">Sample Event Flow</span></a>
        </li>
        <li>
            <a href="#Sec2"><span style="font-family: helvetica; font-size: 12pt;">Pre-requisite</span></a>
        </li>
        <li>
            <a href="#Sec3"><span style="font-family: helvetica; font-size: 12pt;">Sample Offerings &amp; On-boarding Process for Proof of Concept or Project</span></a>
        </li>
        <ul id="Sec3">
            <button id="SubSec1_btn">
            <li>
                <a href="#SubSec1"><span style="font-family: helvetica; font-size: 12pt;">Offerings</span></a>
            </li>
            </button>
            <ul id="SubSec1">
                <li><span style="font-family: helvetica; font-size: 12pt;">Offering 1 - Publish Events Real Time</span></li>
                <li><span style="font-family: helvetica; font-size: 12pt;">Offering 2 - Subscribe Events Real Time</span></li>
                <li><span style="font-family: helvetica; font-size: 12pt;">Offering 3 - Publish and Enrich Events in Real Time</span></li>
                <li><span style="font-family: helvetica; font-size: 12pt;">Offering 4 - Event Monitoring and Production Support</span></li>
            </ul>
           <button id="SubSec2_btn">
            <li>
                <a href="#SubSec2"><span style="font-family: helvetica; font-size: 12pt;">Security</span></a>
            </li>
            </button>
            <ul id="SubSec2">
              <li><span style="font-family: helvetica; font-size: 12pt;">Sample App Secure Integration Options / Process</span></li>
            </ul>
        </ul>
        <li>
            <a href="#Sec4"><span style="font-family: helvetica; font-size: 12pt;">Sample Catalogue - MetaLine</span></a>
        </li>
        <li>
            <a href="#Sec5"><span style="font-family: helvetica; font-size: 12pt;">Sample Team</span></a>
        </li>
        <li>
            <span style="font-family: helvetica; font-size: 12pt;"><a href="#Sec6">FAQ</a></span>
        </li>
      </ol>