Tengo una consulta.
Yo tengo hecho en CSS un "hover", que al pasar el mouse por un <div> se despliegue uno hacia abajo con información.
Ahora, lo que yo quiero es que cuando haga clic en el primer <div> se despliegue el segundo hacia abajo pero que quede desplegado. Porque con CSS tengo entendido que no se puede. Acá les dejo los códigos.
Archivo PHP que llama los otros archivos.
Código PHP :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FAQ</title>
<link rel="stylesheet" type="text/css" href="faqcss.css">
</head>
<body>
<div id="bodygral">
<?php include("banner.php"); ?>
<?php include("menuprincipal.php"); ?>
<?php include("faqcuerpo.php"); ?>
<?php include("footer.php"); ?>
</div>
</body>
</html>Archivo PHP "faqcuerpo.php".
Código PHP :
<div id="body"> <div class="preguntas"> <div class="titulo"> <p class="titulo">¿Cómo me inscribo?</p> </div> <div class="info"> <p class="info">Para inscribirse debe completar la planilla.</p> <p class="info">La misma está situada en el menú "<a href="nosotros.php">novedades</a>"</p> </div> </div> </div>
Archivo CSS "faqcss.css".
Código CSS :
*{
margin:0px;
padding:0px;
font-family: fantasy;
}
div#body{
margin-top: 5px;
margin-left: 180px;
margin-right: 25px;
width:auto;
min-height:50px;
background-color: red;
overflow: hidden;
border-radius: 15px;
-webkit-box-shadow: -3px -3px 5px 0px rgba(0,0,0,0.35);
}
div.preguntas{
width:auto;
min-height:50px;
background-color: #4bbcd8;
-webkit-transiton: height 0.2s;
}
div.titulo{
width:auto;
height:50px;
background-color: #4bbcd8;
overflow: hidden;
border-bottom: 1px solid #FFFFFF;
}
p.titulo{
text-align:center;
margin:13px;
color: white;
}
div.info{
width:auto;
width:auto;
height:0px;
background-color: #FFFFFF;
overflow: hidden;
-webkit-transition: height .2s;
}
p.info{
margin:15px;
text-align: center;
color: black;
}
div.preguntas:hover div.info{
height:180px;
} 
