Tutorial #50 del curso de Jquery, en este tutorial veremos como crear contenido colapsable y como covertirlos a un acordeón similar a jquery UI pero esta vez utilizando jquery-mobile
<!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 - Mobile - Contenido colapsable - acordeondes</title> <link href="jquery-mobile/jquery.mobile-1.4.5.min.css" rel="stylesheet"> </head> <body> <div data-role="page" id="pagina1"> <div data-role="header"> <h2>jquery mobile</h2> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed="false" data-mini="true" data-iconpos="top"> <h4>Primer acto</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui esse perspiciatis sint, aspernatur assumenda id dolorem consequatur, possimus iure, officia, minima natus corporis. Iure ipsum, exercitationem cupiditate deserunt aspernatur!</p> </div> <div data-role="collapsible"> <h4>Segundo acto</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui esse perspiciatis sint, aspernatur assumenda id dolorem consequatur, possimus iure, officia, minima natus corporis. Iure ipsum, exercitationem cupiditate deserunt aspernatur!</p> </div> <div data-role="collapsible"> <h4>Tercer acto</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui esse perspiciatis sint, aspernatur assumenda id dolorem consequatur, possimus iure, officia, minima natus corporis. Iure ipsum, exercitationem cupiditate deserunt aspernatur!</p> </div> <div data-role="collapsible"> <h4>Cuarto acto</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui esse perspiciatis sint, aspernatur assumenda id dolorem consequatur, possimus iure, officia, minima natus corporis. Iure ipsum, exercitationem cupiditate deserunt aspernatur!</p> </div> <div data-role="collapsible"> <h4>quinto acto</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum qui esse perspiciatis sint, aspernatur assumenda id dolorem consequatur, possimus iure, officia, minima natus corporis. Iure ipsum, exercitationem cupiditate deserunt aspernatur!</p> </div> </div> </div> <div data-role="footer" class="ui-bar"> <h2>Cursos de Jquery 2015</h2> </div> </div> <script src="js/jquery-2.1.3.min.js"></script> <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script> </body> </html>