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