CODEWITHSUNDEEP
javascripthtml
dagnelies
dagnelies

Reputation: 5321

javascript clickable text

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

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

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

Thanks,
Arnaud

Upvotes: 2

Views: 4539

Answers (4)

Yoann
Yoann

Reputation: 5077

You can add dynamic content with jQuery :

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

I write a pure JavaScript code...

Upvotes: 0

Bryan Weaver
Bryan Weaver

Reputation: 4473

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.net/WwCcF/

Upvotes: 0

Thorben
Thorben

Reputation: 6981

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.

Upvotes: 0

Bj&#246;rn
Bj&#246;rn

Reputation: 29381

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

Upvotes: 5

Related Questions