Home
índice
Página anterior

Fazendo Accordion com Jquery UI

Accordion

O Accordion “menu sanfona”, ajuda a estruturar conteúdos em tópicos. É algo bastante simples de fazer gastando poucas linhas de código. Exemplo de accordion feito usando a biblioteca jQuery UI. Para baixá-la, clique nesse link Biblioteca jQuery

Script

<html>		
    <head>
<title>JQuery UI - Acordion</title>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" href="/static/css/style_jQuery-ui.css" />
<script type= "text/javascript" src= "/static/js/jquery.min.js"></script> 
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>  
<script type= "text/javascript">

 $(function(){
    $("#accordion").accordion({
         collapsible:true
      });
     });
   </script> 
   </head>	   
</body>
</html>

Html

<body>
  
	No Html:
	<h3><a href="#">Section 3</a></h3>
	<div>
	<p>Colocar o texto dentro do parágrafo. Pode ser uma lista.
		<ul>
		   <li>List item one</li>
		   <li>List item two</li>
		   <li>List item three</li>
		</ul>
	</div>
	</p>
 </body>