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

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

• javascript
• html

4 Answers 4

<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 acplish the same.

I would use jQuery. Give every element an ID, set a onClick listener via jQuery to every element and let it run a function which looks for a child element (like a <p> or something you wanna surround your content with) and display it.

Here is a simple jQuery function that uses insertAfter

$('li').click(function() {
    $('<span>blah blah</span>').insertAfter(this);
});

See it in action here: http://jsfiddle/WwCcF/

You can add dynamic content with jQuery :

$("li").click(function() {
    $(this).append("<br />bla bla bla");
});

I write a pure JavaScript code...