Interactive list of items [on hold]

I want to create a HTML page with a list, the content of each element should be hidden by default. When an user clicks on an element, the content becomes visible (see the picture). Picture

What is needed to do it?

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers
2

It depends on your needs in terms of interactivity, accessibility and visual appearance.

In the simplest way in case of HTML5, you can use the <summary> and <details> tags to provide a summary of content and if the user clicks on it, the full content will be presented.

<summary>

<details>

The <details> & <summary> elements are not supported by all browsers if you take a look at caniuseit.com.

<details>

<summary>

The best way would be to use just good old css and a bit of javascript/jQuery.

Here's a working fiddle for the functionality, all other stuff is just pure css:

$("li").click(function() {
$(this).find('span').toggleClass("hide");
});

.list li{
list-style:none;
cursor:pointer;
border:solid 3px red;
margin:10px 0;
padding:10px;
}
.hide{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li><span class="hide">First item</span></li>
<li><span class="hide">Second item</span></li>
<li><span class="hide">Third item</span></li>
</ul>

cursor: pointer

cursor: help