0

me gustaria que me ayudaran a ocultar y mostrar mi parrafo con css sea con hover o a darle click al enlace

<div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                <a href="#close" title="Close" class="close">X</a>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                            </div>
                        </div>
3
  • Cuál es el párrafo que querés ocultar? Debería ocultarse al hacer :hover y después vuelve al estado normal?
    – Kleith
    Commented el 24 may. 2019 a las 15:09
  • la de <p> Lorem ipsum..........................</p> Commented el 24 may. 2019 a las 15:16
  • ¿Quieres que no se vea o que además no ocupe espacio?
    – AbelG
    Commented el 24 may. 2019 a las 16:43

1 respuesta 1

0

Hola miro necesitas igual ayuda de JavaScript para lo que deseas lograr te dejo una manera para hacerlo sin ninguna libreria extra

function mostrar(){
  var parrafo= document.getElementById("parrafo");
  if(parrafo.style.visibility==""||parrafo.style.visibility=="hidden"){
    parrafo.style.visibility="visible";
  }
  else{
    parrafo.style.visibility="hidden";
  }
}
#parrafo{
  visibility:hidden;
}
<div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                <a href="#close" title="Close" class="close" onclick='mostrar()'>X</a>
                                    <p id='parrafo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                            </div>
                        </div>

Espero haberte ayudado

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.