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

Anonymous · ‎08-10-2015

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

SanfordWhiteman · ‎08-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.

Anonymous · ‎08-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>

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

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

<ul>

ETH Zürich

Gebäude HPL

Wednesday 30th September / 10.00 - 11.30am

Room HPLJ28

</ul>

</div>

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

<ul>

Geneva University

Centre Médical Universitaire - 2nd floor

Wednesday 30th September / 4.00 - 5.30pm

Room 2364

</ul>

</div>

</body>

Could you tell me what is wrong in my HTML?

thank you,

Alexandra