Jump to content

Collapsible list not working

Recommended Posts

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:

<head>
    <style type="text/css">
        .row { vertical-aligntopheight:auto !important; }
        .list {display:none; }
        .show {displaynone; }
        .hide:target + .show {displayinline; }
        .hide:target {displaynone; }
        .hide:target ~ .list {display:inline; }
        @media print { .hide.show { displaynone; } }
     </style>

</head>

 

<body>
    <!--The first block-->
         <div class="row">
                <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>
 </body>
Link to comment
  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.