2 Replies Latest reply on Aug 12, 2015 8:33 AM by 0842585caed002a29f036aac9f5d2a87c3dc3a45

    How to hide content that becomes visible when it is clicked ?

      Hi,

       

      I would like to hide and un-hide some content of my landing page like below:

       

      Content hidden

       

       

      Content un-hidden

       

      I read on forums that the best is to use div and Javascript, but I cannot manage to do that in the HTML section.

      Could anyone help me ?

       

      Thanks,

      Alexandra

        • Re: How to hide content that becomes visible when it is clicked ?
          Sanford Whiteman

          This is a bit of a broad question, as there are many ways to do show/hide (in your case called a "treeview").  Unless you are sure you want to roll your own (which you probably shouldn't if you don't know JS), you should choose a third-party library.  One example: jsTree

           

          I don't know what exactly you mean by "cannot manage to do that."  An HTML block will accept both <SCRIPT> and <DIV> tags.  Though of course you do have to know something about how markup and scripts work together.  You may want to hire a developer if you can't figure it out.

            • Re: How to hide content that becomes visible when it is clicked ?

              Hi Sanford,

               

              Thank you for your help.

               

              Let me be more specific.

              I would like to hide and show content by clicking on the following link:

               

               

              Once you click on Zürich,

              "ETH Zürich

              Gebäude HPL

              Wednesday 30th September / 10.00 - 11.30am

              Room HPLJ28"

              should appear below Zürich.

               

              Below is my HTML code:

               

              <HEAD>

              <style type="text/css">

              .row { 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>

              </HEAD>

              </br>

              <body>

              <div class="row">

              <p>

              <li style="font size:12px;font-weight: normal;"><a href="#hide1" class="hide" id="hide1">Zürich (CH), Wednesday 30th September</a>

              <a href="#show1" class="show" id="show1"> Zürich (CH), Wednesday 30th September </a>

              </li></p>

              <div class="list">

              <ul>

              ETH Zürich

              Gebäude HPL

              Wednesday 30th September / 10.00 - 11.30am

              Room HPLJ28

              </ul>

              </div>

              <div class="row">

              <p>

              <li style="font size:12px;font-weight: normal;"><a href="#hide1" class="hide" id="hide1"> Geneva (CH), Wednesday 30th September</a>

              <a href="#show1" class="show" id="show1"> Geneva (CH), Wednesday 30th September </a></li>

              </p>

              <div class="list">

              <ul>

              Geneva University

              Centre Médical Universitaire - 2nd floor

              Wednesday 30th September / 4.00 - 5.30pm

              Room 2364

              </ul>

              </div>

              </div>

              </body>

               

               

              Could you tell me what is wrong in my HTML?

               

              thank you,

              Alexandra