Ocultar y mostrar panel

[nmenna10]

Hola estimados!, como andan?

Estoy trabajando en una pagina web y tengo un problema, nose como hacer para mostrar y ocultar paneles en mi vista.

Este es mi codigo HTML:

Cuando presiono el botón comentar o solucionar quiero que se visualice uno de los dos paneles de abajo, dependiendo que botón se presione

Código:

<div>
                            <a class="btn btn-default btn-panel boton-solucion" onclick=""  role="button">Solución</a>
                            <a class="btn btn-default btn-panel boton-comentar" onclick=""  role="button">Comentar</a>
                                    <!--<a class="">{{ form(delete_form) }}</a>      -->
                            <a class="btn btn-default btn-panel boton-eliminar-ver col-md-offset-4" href="{{ path('trabajo_eliminar', { 'id': entity.id }) }}" role="button" onclick="confirmar()">Eliminar</a>                  
                            <a class="btn btn-default btn-panel boton-editar-ver" href="{{ path('trabajo_edit', { 'id': entity.id }) }}" role="button">Editar</a>
                            <a class="btn btn-default btn-panel boton-volver-ver" href="{{ path('trabajo') }}" role="button">Volver a la lista</a>
                        </div>
                            
                                
                
                        <hr>


                        <hr>
                        <div id="solucion" class="panel panel-success">
                            <div class="panel-heading">Solución</div>
                            <div class="panel-body">
                                <form action="{{ path('trabajo_solucionar', { 'trabajoId': entity.id }) }}" method="post">
                                    <textarea class="form-control" rows="3" name="solucion"></textarea>
                                    <br>
                                    <input class="btn btn-default btn-panel boton-solucion" onclick="" type="submit" value="Guardar">
                                    <input class="btn btn-default btn-panel boton-comentar" onclick="" type="submit" value="Cancelar">
                                </form>
                            </div>
                        </div>

                        <div id="comentario" class="panel panel-default">
                            <div class="panel-heading">Comentario</div>
                            <div class="panel-body">
                                <form action="{{ path('trabajo_nuevocomentario', { 'trabajoId': entity.id }) }}" method="post">
                                    <textarea class="form-control" rows="3" name="descripcion"></textarea>
                                    <br>
                                    <input class="btn btn-default btn-panel boton-solucion" onclick="" type="submit" value="Guardar">
                                    <input class="btn btn-default btn-panel boton-comentar" onclick="" type="submit" value="Cancelar">
                                </form>
                            </div>
                        </div>

Muchas gracias.

[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.