JQuery

Tabelas aninhadas (Accordion)

Publicado por antlou em 04/07/2015

No terceiro plugin jquery, utilizando a biblioteca JQuery-ui será desenvolvido um painel de conteúdos ou ainda quem chame de tabelas aninhadas.

Accordion - Painéis de conteúdo para apresentação de informações numa quantidade limitada de espaço.

Resultado:

Clique nos cabeçalhos para expandir / recolher os conteúdos.

Conteudo 1

Introduzir o texto e/ou imagem pretendida aqui...

Conteudo 2

Introduzir o texto e/ou imagem pretendida aqui...

Conteudo 3

Introduzir o texto pretendido aqui...

item 1
item 2
item 3

Conteudo 4

Introduzir o texto pretendido aqui...

accordion.html



<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI accordion</title>
  
  <link rel="stylesheet" href="jquery-ui-1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
  <script src="jquery-2.1.1.js"></script>
  <script src="jquery-ui-1.11.4/jquery-ui.js"></script>
  <!--
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
  -->
 
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
 
 <div id="accordion">
    <h3>Conteudo 1</h3>
      <div>
        <p>Introduzir o texto e/ou imagem pretendida aqui... </p>
      </div>
      <h3>Conteudo 2</h3>
      <div>
        <p>Introduzir o texto e/ou imagem pretendida aqui...</p>
      </div>
      <h3>Conteudo 3</h3>
      <div>
        <p>Introduzir o texto pretendido aqui...</p>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
      </div>
    <h3>Conteudo 4</h3>
      <div>
        <p>Introduzir o texto pretendido aqui...</p>
      </div>
</div>
</body>
</html>

voltar para o topo ↑

Download Código

Simples... e eficiente!

Espero ter sido útil. Avalie o grau de satisfação.

1 votos - 5 pontos - 9 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.