How to hide content that becomes visible when it is clicked ? | Community
Skip to main content
A
Anonymous
August 10, 2015
Question

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

  • August 10, 2015
  • 1 reply
  • 1261 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
August 10, 2015

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.

A
Anonymous
August 12, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...