Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 11
Tutorial para Criar Accordions

O que � um Accordion
Accordion � uma forma de exibir pain�is de conte�do recolh�veis para apresentar informa��es em uma quantidade limitada de espa�o.
Nesse tutorial vamos mostrar como criar v�rios modelos de Accordions:
Clique nos cabe�alhos para expandir/recolher o conte�do dividido em se��es l�gicas, como as guias. Opcionalmente, alterne se��es abertas/fechadas ao passar o mouse.
A marca��o HTML subjacente � uma s�rie de cabe�alhos (tags H3) e divs de conte�do para que o conte�do seja utiliz�vel sem JavaScript.
Exemplo 1:
Nesse exemplo apenas uma op�ao fica vis�vel por vez, ou seja, quando uma � aberta a �ltima � fechada.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstra��o de Accordion em JQuery - Exemplo 1</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#accordion" ).accordion(); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div id="accordion"> <h3>Python</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3>JavaScript</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>jQuery</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>HTML5</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 2:
Esse exemplo funciona da mesma forma que o anterior, s� que temos a op��o de utilizar ou n�o um �cone mediante o pressionamento de um bot�o. O �cone pode ser usado qualquer um de sua prefer�ncia.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Accordion - Customize icons</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $( "#accordion" ).accordion({ icons: icons }); $( "#toggle" ).button().on("click", function() { if ( $( "#accordion" ).accordion( "option", "icons")) { $( "#accordion" ).accordion("option", "icons", null); } else { $( "#accordion" ).accordion("option", "icons", icons); } }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div id="accordion"> <h3>Python</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>JavaScript</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>jQuery</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>HTML5</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> <button id="toggle">Alternar icons</button> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 3:
Esse exemplo funciona da mesma forma que o anterior, s� que temos uma barra de rolagem do lado direito para redimensionar ainda mais o espa�o caso o conte�do seja muito grande. Al�m disso esse accordion � escalon�vel, ou seja, utilizando a pequena seta � direita e emaiaixo voc� poder� alterar o tamanho e a largura do accordion como um todo.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Accordion - Fill space</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #accordion-resizer { padding: 10px; width: 350px; height: 220px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#accordion" ).accordion({ heightStyle: "fill" }); $( "#accordion-resizer" ).resizable({ minHeight: 140, minWidth: 200, resize: function() { $( "#accordion" ).accordion( "refresh" ); } }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <h3 class="docs">Redimensione o cont�iner externo:</h3> <div id="accordion-resizer" class="ui-widget-content"> <div id="accordion"> <h3>Python</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> <h3>JavaScript</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>jQuery</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>HTML5</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 4:
Esse exemplo permite que voc� coloque os t�tulos na ordem que voc� desejar, bastando para isso clicar no cabe�alho e arrastar o mesmo para cima ou para baixo.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Accordion - Sortable</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#accordion" ) .accordion({ header: "> div > h3" }) .sortable({ axis: "y", handle: "h3", stop: function( event, ui ) { // IE doesn't register the blur when sorting // so trigger focusout handlers to remove .ui-state-focus ui.item.children( "h3" ).triggerHandler( "focusout" ); // Refresh accordion to handle new order $( this ).accordion( "refresh" ); } }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <div id="accordion"> <div class="group"> <h3>Python</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> </div> <div class="group"> <h3>JavaScript</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> </div> <div class="group"> <h3>jQuery</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <div class="group"> <h3>HTML5</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

<< Tutorial para Saber como Utilizar os Eventos slideDown() e slideUp()
Tutorial para Criar Calend�rios >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino