Blue MUIOMUIO

Blogue pessoal de um Web Designer

Tutorial: Secções Extensíveis

Thursday March 06th 2008 Tutoriais

Neste tutorial irei explicar como criar uma secção extensível com conteúdo. O resultado final pode ser visto aqui.

secção extensível show hide div

Breve descrição

A secção extensível é composta por 2 partes:

  1. O cabeçalho
  2. O conteúdo

O cabeçalho

O cabeçalho é composto por um <span> e por uma de cabeçalho (h2) que ambos serão estilizados com CSS.
Ao clicar no cabeçalho irá mostrar ou ocultar o conteúdo.

O conteúdo

O conteúdo terá um texto de exemplo e um link que permitirá ocultar todo o conteúdo.

Primeiro Passo, o código HTML:

<h2><span><a href=“#” onclick=“cabracega(’noticias’)”>Noticias</a></span></h2>
<div id=“noticias” class=“seccao”>
<span>
O conteúdo é colocado aqui
</span>
</div>

O link chama uma função em javascript chamada cabracega que mostra ou oculta o conteúdo do div com a ID de noticias. Este código pode ser usado para mais de uma secção extensível. Para tal basta atribuir nomes diferentes as secções. (noticias1, noticias2, noticias3…)
Caso contrário poderá causar algum conflito.

Segundo Passo: Código CSS

h2{ margin:0px;
padding:0px;
border:0px;
color:#00f;
font-size:13px;
display:block;
}

h2 span{
padding:10px;
display:block;
}

h2 a:link, h2 a:visited{
color:#00f;
text-decoration:none;
display:block;
}

div.seccao {
font-size:12px; }

div.seccao span{
padding:10px;
display:block;
}

Terceiro Passo: Código Javascript

<script type=“text/javascript”>
function cabracega(id){
var mySection = document.getElementById(id);
if(mySection.style.display==”none”){
mySection.style.display=”block”;
} else {
mySection.style.display=”none”;
} }
</script>

O JavaScript vai buscar a ID da secção através de um link:

<a href=“#” onclick=“cabracega(‘noticias’)”>

Resultado final

Partilha: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • DoMelhor
  • EuCurti
  • Facebook
  • Mar.cant.es
  • Sapo
  • StumbleUpon
  • Technorati
  • Ueba
/ save to del.icio.us 0

 1 Comentário
Deixa um comentário

Cria uma bloglist com os teus blogs preferidos no Blogger.com | Ferramentas para blogs, Noticias, WordPress, Tutoriais e muito mais... - MUIOMUIO.NET 06.06.08 @ 9:55 am (Pingback)

[...] Mostrar todos os links ou esconder alguns por detrás de um link “show all” ao estilo show/hide menu [...]


RSS feed para comentários neste artigo. TrackBack URI


Quebras de linha e parágrafo automáticas, endereço de -mail nunca será revelado, Tags HTML aceites: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line=""> , Comentários com * são obrigatórios

(*)

(*)