Enlaces ocultos

[esnalca]

Buenas

Soy un programador sin mucha experiencia estoy usando bootstrap y tengo una columna con tres links y quiero que aparezca al que hago click y los otros dos no los muestre tengo el siguiente codigo:

Código HTML:

<!-- Informacion Adicional -->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 well">
      <a href="#info1">Informacion1</a>
    </div>
    <div class="col-xs-4 well">
      <a href="#info2">Informacion2</a>
    </div>
    <div class="col-xs-4 well">
    <a href="#info3">Informacion3</a>
    </div>
  </div>
  <!-- contenido informacion adicional -->
  <div class="row">
    <div class="col-xs-12 well">
      <p>Info1</p>
    </div>

    <div class="col-xs-12 well">
      <p>Info2</p>
    </div>
    <div class="col-xs-12 well">
    <p>Info3</p>
    </div>
  </div>
</div> 

quiero que cuando le de a info1 debajo me aparezca info1 pero no muestre ni info2 ni info2 y si hago click en info2 dos lo mismo.


Muchas gracias

[AngelKrak]

me imagino que quieres algo como esto amigo, ahi te lo hice ;)
puedes ocultar el contenido mediante CSS tambien o dejarlo asi con JQUERY ;)


http://www.bootply.com/8xvffhoVnX

[esnalca]

Muchisisimas gracias, justo queria eso!!!

Aunque me gustaria que info1 no estubiera oculto

[esnalca]

Me gustaria que al acceder se viese el Info1 y como se quita los efectos? seria mas simple aparece uno y se cambia por el otro

[AngelKrak]

solo pon el .show de Jquery al ID que quieres que se muestre y listo
$("#info1").show();

Demo:
http://www.bootply.com/8xvffhoVnX