Ubicar div debajo de texto al dar clic en este

[Hadess_inf]

Hola buen día, haber si alguien me da una mano. Como tendría que hacer para que un div se ubique debajo de una etiqueta li cuando doy clic en ella.

Ejemplo:

<ul>
   <li>UNO</li>
   <li>DOS</li>
   <li>TRES</li>
</ul>

<DIV></DIV>

Al dar clic en :
- UNO se cargara un contenido en el div (pero este se debe de ubicar debajo de UNO)
- DOS se cargara un contenido en el div (pero este se debe de ubicar debajo de DOS)
- TRES se cargara un contenido en el div (pero este se debe de ubicar debajo de TRES)

La idea es que según sea el caso el div debe ponerse debajo de cada li.

Gracias desde ya.
Saludos.

[Beakman]

Podés hacerlo con javascript (o jquery). Y creo que sería más sencillo con tres divs. Y simplemente mostrarlos al hacer click, y ocultarlos cuando se haga click en otra parte.

[#!drvy]

Aunque estoy de acuerdo con @Beakman, puedes usar jQuery para hacerlo fácilmente.

Ejemplo:

Código (javascript) [Seleccionar] Expandir

<script type="text/javascript">
$(document).ready(function() {
   $('ul > li').click(function(){
      // Obtenemos el LI que se ha clickeado.
      var item = $(this);
      // Cogemos el div con id "contenido" y lo soltamos.
      var contenido = $('#contenido').detach();
      //  Insertamos el div despues del LI que hemos clickeado.
      contenido.insertAfter(item);
   });
});
</script>

PD: Notese que detach(); No hace falta. Pero he leído en algunos sitios que solo con insertAfter acaba haciendo 2 copias del elemento en algunos teléfonos móviles.

Saludos