La sección la abro dando un click con el ratón.
Pongo un trozo explicativo del html
Código HTML:
<!DOCTYPE html>
<html dir="ltr" lang="es">
<head>
<meta charset="utf-8" />
<?php
include('xua.php');
?>
<title>Ejemplos Segundo Bachiller Tema 1</title>
<!--[if IE]><script src="js/HTML5forIE.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 9]><script src="js/flexboxIE9.js"></script><![endif]-->
<meta name="viewport" content="width=device-width">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/style.css" rel="stylesheet" media="all" />
<link href="css/canvas_funciones.css" rel="stylesheet" media="all" />
<link href="css/tooltips.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<!-- LOS JQUERYUI DE ACORDEON -->
<script type="text/javascript" src="js/jqueryui/jquery-ui.js"></script>
<script src="js/jqueryui/jquery.ui.widget.js"></script>
<script src="js/jqueryui/jquery.ui.accordion.js"></script>
<!-- EL PROPIO PARA QUE FUNCIONE MI ACORDEON -->
<script src="js/jqueryui/acordeon.js"></script>
</head>
<body>
<!-- AQUI SUPRIMO CODIGO QUE NO VIENE A CUENTO AHORA -->
<div class="accordion">
<h4 class="acordeon">Ejemplo 1:</h4>
<section class="contacordeon">
<div class="block">
<section class="enunciados">
<!-- AQUI PONGO EL ENUNCIADO. -->
</section>
<!-- AQUI PONGO LA RESOLUCIÓN -->
</div>
</section>
<h4 class="acordeon">Ejemplo 2:</h4>
<section class="contacordeon">
<div class="block">
<section class="enunciados">
<!-- AQUI PONGO EL ENUNCIADO. -->
</section>
<!-- AQUI PONGO LA RESOLUCIÓN -->
</div>
</section>
<h4 class="acordeon">Ejemplo 3:</h4>
<section class="contacordeon">
<div class="block">
<section class="enunciados">
<!-- AQUI PONGO EL ENUNCIADO. -->
</section>
<!-- AQUI PONGO LA RESOLUCIÓN -->
</div>
</section>
</div> <!-- FINALIZA EL ACORDEON -->
</body>
</html> El código js de acordeon.js es el siguiente:
Código:
$(document).ready(function() {
$( ".accordion" ).accordion({
heightStyle: "content",
collapsible: true
});
});
Espero que sea suficiente código
Gracias