JavaScript - Como mostrar y ocultar información de los elementos de una lista?

   
Vista:

Como mostrar y ocultar información de los elementos de una lista?

Publicado por Pablo Waller (2 intervenciones) el 11/04/2015 18:43:04
Hola espero puedan ayudarme, tengo que realizar una lista de países, y necesito que se muestre información acerca de cada uno a la derecha de la lista, cada vez que hago click en uno de los elementos aparece la información del mismo, y la que estaba anteriormente desaparece. Por ejemplo:

PARAGUAY
URUGUAY Habitantes/ha= 200
VENEZUELA Población total=3.000.000
ARGENTINA Nivel de alfabetización=Alto
COLOMBIA
BRASIL

Necesito que cuando haga click en PARAGUAY, aparezca esta información a la derecha, y que luego si hago click en COLOMBIA, la información de PARAGUAY sea sustituida por la de COLOMBIA.
Pd: los datos salieron pegados a la lista de países, pero irían separados en un contenedor a la derecha.

Agradezco cualquier información que puedan darme, ya que soy un aprendiz y estoy empezando a diseñar sitios web.
Muchas gracias de antemano!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

Como mostrar y ocultar información de los elementos de una lista?

Publicado por Vainas (239 intervenciones) el 12/04/2015 21:56:08
Buenas:

Tienes algo de codigo ya hecho?. Hazte unos divs de como quieres que se vean las cosas, por ejemplo en la izquierda los paises y en la derecha el que va a cambiar.

A los divs de la izquierda (en cada uno tendras un pais) le podemos asignar una clase para luego asignarles a todos el evento onclick. A el div de la derecha le asignamos un id para saber que lo de dentro lo borramos y vamos a meter informacion nueva.

puedes usar jQuery para hacer la gestion de eventos mas rapida y clara.

Puedes colocar los paises en un objeto javascript:

var paises = {'PARAGUAY': '5mil hab', ...}

Traenos algo para al menos poder soltarte algo de codigo o que?

Espero que te ayude la info. Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como mostrar y ocultar información de los elementos de una lista?

Publicado por Pablo Waller (2 intervenciones) el 13/04/2015 01:19:14
Hola Vainas muchas gracias por tu respuesta. Ok, aquí pongo algo de código. No tengo conocimientos en jQuery, solo html 5 y css...estudio diseño grafico, no programación, entonces en la parte de código estoy medio flojo. Si pudieras guiarme sobre como lograr que diferente información aparezca en el div informacióna, según clickeo países diferentes de la lista te agradecería inmensamente.

<div class="paises">
<ul>
<li>ARGENTINA</li>
<li>BRASIL</li>
<li>CHILE</li>
<li>URUGUAY</li>
</ul>
</div>

<div id="informacióna">
<p>Capital: Montevideo</p>
<p>Prefijo telefónico: +598</p>
<p>Presidente: Tabaré Vázquez</p>
<p>Moneda: Peso uruguayo</p>
<p>Población: 3,407 millones (2013) Banco Mundial</p>
<p>Idioma oficial: Idioma español</p>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar