¿Cómo hacer que al dar clic en un texto se despliegue otro texto debajo de él?

[Jett]

Buen día. No comprendo mucho acerca de todo esto todavía, así que me disculpo de antemano si esta pregunta no va en este foro.

Quiero ingresar los siguientes textos, cada uno separado por un salto de línea (en cada texto, el asterisco representa una pequeña imagen de una estrella):

*Misión
*Visión
*Enfoque
*Objetivo

Quiero lograr que al dar clic en cada palabra (incluyendo la pequeña imagen) se despliegue debajo de ella un texto, y que (si es posible) el texto que se despliegue tenga una imagen. También quiero lograr que al dar clic en otra palabra, el texto que ya estaba abierto se cierre y sólo se abra el nuevo.

¿Alguien podría ayudarme, por favor? Una vez que uso códigos sé editarlos, pero crearlos es algo imposible para mí con mi actual nivel de conocimientos. Buen día, y gracias de antemano.

[Linton]

El recurso es darles con CSS la propiedad display: none (es decir, quedarán ocultos)

Y luego :hover {display: block} Es decir, cuando pase el cursor se mostrarán.

Saludos.

[Jett]

Hola. Muchas gracias por responder. ¿Debo poner el código sin nada más? Disculpa, pero no comprendo muchas de estas cosas.
Otra cosa: estoy buscando que el texto quede visible hasta que se presione otra palabra de las que escribí arriba, no que sólo se muestre mientras el cursor pasa por la palabra.

Saludos.

[Linton]

De nada.

Debes contar con una base en CSS, ten a mano esto para empezar: http://librosweb.es/css/

Si quieres que el texto oculto se haga visible al pulsar, debes ponerle un enlace y declarar primero display: none, luego:

Código CSS:

.texto:active {display: block;}
 

Pero ya te digo, no te vas a enterar de mucho si no conoces lo básico de CSS. Ponte a ello, es muy divertido

Saludos.