Question

this should be a pretty basic question.
I would like to have some html listing:

• A
• B
• C

And by clicking on one of the elements, something should be displayed below. For example, when clicking B, we obtain:

• A
• B
  “bla bla bla”
• C

I guess there are many ways to achieve that. I just would like the easiest/cleanest way to do that.

Thanks,
Arnaud

Answer 1

<script>
function open_item(sender) {
    sender.getElementsByTagName('div')[0].style.display = 'block';
}
</script>

...

<ul>
   <li onclick="open_item(this);">
      A
      <div style="display: none;">bla bla</div>
   </li>
   <li onclick="open_item(this);">
      B
      <div style="display: none;">bla bla</div>
   </li>
   <li onclick="open_item(this);">
      C
      <div style="display: none;">bla bla</div>
   </li>
</ul>

One of many, many, many ways to accomplish the same.