Ocultar y mostrar panel

[fede5426]

Primero que nada agregarle los href="#" a los enlaces Solucion y Comentarios, sino no te lo reconoce como enlace.

Lo que hay que hacer es agregarle un id a solucion y otro a comentarios, con CSS darles un display none para hacerlos desaparecer, y despues con jquery indicamos que cuando le demos click a Solucion, se abra su respectivo contenedor y cierre el de comentarios en caso que este abierto. Y de igual manera para Comentario.

Código HTML:

<a href="#" id="btn_solucion">Solucion</a>
<a href="#" id="btn_comentario">Comentario</a>
 
<div id="solucion>
   ...
   ...
</div>
 
<div id="comentario>
   ... 
   ...
</div>
 

Código CSS:

#solucion, #comentario{
   display:none;
}
 

Código Javascript:

$(document).ready(function(){
 
  $("#btn_solucion").click(function(){
    $("#solucion").slideToggle(200);
    $("#comentario").slideUp(200);
  });
  
  $("#btn_comentario").click(function(){
    $("#comentario").slideToggle(200);
    $("#solucion").slideUp(200);
  });
  
});
 

Ejemplo completo con tu html:

http://codepen.io/anon/pen/PwxOyP

Tanto el slideToggle como el slideUp los podes suplantar con cualquier otro efecto de aparición y desaparición.. fadeIn y fadeOut por ejemplo..

Lo bueno del toggle es que reconoce en que estado está el elemento, si está oculto lo muestra y si está visible lo oculta.

Se podria usar show(); para mostrar y hide(); para ocultar, pero quise hacer que la transición sea menos brusca :P

Saludos

Agrego:

Los divs #solucion y #comentario, al aparecer van a empujar el resto del contenido de la pagina hacia abajo..

Si no te gusta ese comportamiento solamente agrega position absolute a ambos.