Tutorial #36 del curso de JQuery, en este tutorial nos adrentramos a los widgets de jquery ui, veremos el método accordion, este nos permitira crear sección plegables y desplegables.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery UI - accordion</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="acordeon">
<h3>Sección 1</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fuga rerum laborum recusandae provident facere consequatur consectetur optio ipsum, tempore nihil, repellat, sapiente expedita eius nam molestiae quidem accusantium. Optio!</p>
</div>
<h3>Sección 2</h3>
<div>
<p>Sint laudantium cumque eligendi ea pariatur non, veniam quo nihil, laborum nostrum quidem iste architecto magnam praesentium, excepturi beatae molestias esse molestiae maiores placeat veritatis! Quos quidem facilis, non odio?</p>
</div>
<h3>Sección 3</h3>
<div>
<p>Aliquam temporibus cupiditate eius adipisci architecto amet molestias libero dignissimos cum eum, veniam ad corrupti pariatur rem vero! Tempora reiciendis laborum repellat magnam quibusdam corporis obcaecati quam dolorem velit, tempore?</p>
</div>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var iconos = {
header: "ui-icon-circle-arrow-e",
activeHeader:"ui-icon-circle-arrow-s"
};
$('#acordeon').accordion({
icons: iconos
});
});
</script>
</body>
</html>