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:

    <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; } }



    <!--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">
                       *****A bunch of Lists using <li> tag******
Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 275
  • Created
  • Last Reply

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; } }
 <!--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">
                       *****A bunch of Lists using <li> tag******


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • 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.