Collapsible list not working

Site URL: https://www.alberta-avenue.com/test-webpage

I have a code for Collapsible list which works on a normal webpage as intended but when I use it in the codes block it does not expand the list upon clicking. Can anyone help me out here please? Thanks!

Here is a code snippet:

Hi. Try adding this to Code Block

<style type="text/css">
        .trow { vertical-align: top; height:auto !important; }
        .list {display:none; }
        .show {display: none; }
        .hide:target + .show {display: inline; }
        .hide:target {display: none; }
        .hide:target ~ .list {display:inline; }
        @media print { .hide, .show { display: none; } }
     </style>
 <!--The first block-->
         <div class="trow">
                <a href="#hide1" class="hide" id="hide1">click to show</a>
                <a href="#show1" class="show" id="show1">click to collapse</a>
 
        <div class="list">
               <ul>
                       *****A bunch of Lists using <li> tag******
              </ul>
        </div>
        </div>