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 JavaScript - 15
Tutorial para Criar Accordeons

Neste tutorial, veremos como criar um simples acordeon em JavaScript. Existe muitos tipos de acordeons, inclusive at� com anima��es e efeitos especiais.
Na web moderna, as pessoas n�o est�o satisfeitas apenas com o texto chato na tela. As imagens poderiam ajudar, mas e se o seu conte�do for apenas texto? Com o JavaScript moderno, voc� pode apimentar qualquer coisa na sua p�gina da web. Aprimore sua apar�ncia, elementos animados na p�gina ou at� mantenha mini-jogos como efeitos no movimento do mouse. Mas agora veremos como criar acorde�es com JavaScript?
Os acorde�es s�o elementos que precisam guiar como estrutura, que oculta o conte�do sob o cabe�alho, como a categoria. Quando o usu�rio clica no cabe�alho, o elemento de conte�do desliza para baixo e mostra o conte�do nesse cabe�alho.
Come�ando primeiro com a estrutura HTML BareBones, precisamos de duas coisas, uma de t�tulo e outra � o conte�do abaixo que ser� mostrado quando o usu�rio clicar neste cabe�alho.
Vejamos um exemplo de um Accordeon simples:
<!DOCTYPE html> <html> <head> <title>Simulados & Tutoriais - Exemplo de Accordeon</title> <style type="text/css"> .accordian-header { background: #e76; color: #fff; padding: 5px 10px; margin: 0; cursor: pointer; } .accordian { border: 2px solid #e76; } .accordian .content { height: 0px; overflow-y: hidden; padding: 0px 10px; } .full-height { height: auto !important; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <div class="container"> <p>Exemplo de Accordeon</p> <div class="accordian-container"> <div class="accordian"> <h2 class="accordian-header">JavaScript</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet ducimus facere odit, consequatur dolorem ut mollitia quis nam corporis eos aperiam, fuga expedita. Nemo obcaecati aliquid debitis, amet tempora autem.</p> </div> </div> <div class="accordian"> <h2 class="accordian-header">Python</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil amet ad commodi id, sit neque cum nostrum odio perferendis iusto mollitia voluptatibus tempora voluptatem, natus in. Beatae necessitatibus, ducimus aliquid fugit tenetur, dignissimos incidunt. Facere maiores necessitatibus veniam natus ipsa itaque explicabo. Accusamus veniam, dolore sit aut cum, ullam similique quidem doloremque, ea saepe harum. Pariatur consectetur, perspiciatis officiis voluptatem, consequuntur ad? Reiciendis asperiores, commodi adipisci sit beatae expedita vitae eos maiores aspernatur neque sequi reprehenderit quo impedit esse minima aperiam dolores tempora fuga ab dolorum necessitatibus natus quod at.</p> </div> </div> <div class="accordian"> <h2 class="accordian-header">Web Development</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam magnam voluptates dolorum sint quam sunt aliquid nam soluta recusandae, illo quidem ex nemo ipsum, inventore beatae ea asperiores placeat assumenda.</p> </div> </div> </div> </div> <script type="text/javascript"> var tabs = document.getElementsByClassName('accordian-header'); for(var i=0; i<tabs.length; i++) { tabs[i].addEventListener('click', function() { var content = this.nextElementSibling; content.classList.toggle('full-height'); }); } </script> </body> </html>
Veja na imagem abaixo o resultado inicial desse c�digo::

Agora, quando o usu�rio clicar em qualquer um dos cabe�alhos o conte�do ser� mostrado, conforme mostra a imagem abaixo:

O conte�do dos cabe�alhos pode ser qualquer coisa, um texto, imagens, v�deos, anima�oes etc. A quantidade de cabe�alhos tamb�m pode variar de acordo com a necessidade.

<< Tutorial para Criar Formul�rios
Tutorial para Saber se um N�mero � Armstrong ou N�o >>

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