Pensando um Brasil …


Abrir e fechar div com sinal de menos e de mais

Olá pessoas!

Quem aí é produtor XHTML e nunca se deparou com a pergunta:

Como abrir e fechar divs usando o sinal de menos e de mais?

Bem, vou ensinar aqui uma solução bem simples, você precisa de duas imagens (uma do”  –  ” e uma do ” + “) e do código abaixo….

entao temos:

menos.gif  >>> menos1

mais.gif  >>> mais1

Salve as imagens no mesmo local em que você irá gerar seu HTML, abra um editor de html (PsPad Editor, EditPlus, DreamWeaver, Bloco de notas) e crie um arquivo com o seguinte código:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="">  <META NAME="Keywords" CONTENT="">  <META NAME="Description" CONTENT="">

  <script language="javascript" type="text/javascript">

function Mostra(idDiv,idImg){     div = document.getElementById(idDiv);     img = document.getElementById(idImg);

     if(div.style.display == 'none')     {        div.style.display = 'block';        img.src='menos.gif';     }     else     {        div.style.display = 'none';        img.src='mais.gif';

     }}
</script>

 </HEAD>

 <BODY>

 <a style='cursor: pointer;' class='abre_fecha' onclick="Mostra('conteudo0','img0');"><img id='img0' src='mais.gif' /> Pavilhões</a>

                <br />
                 <div id='conteudo0' style='display: none;'>

                                <br />

                                                <p>Os setores voltados para a exposição de produtos durante a 22ª Superminas foram chamados de "Pavilhão Azul" e "Pavilhão Vermelho". Muitas oportunidades foram oferecidas nos dois ambientes de negócios e relacionamento. </P>
No "Pavilhão Azul", estiveram presentes as principais empresas fornecedoras do segmento alimentício do País. O espaço abrigou ainda a Ilha da Cachaça, um ambiente totalmente voltado para este segmento que vem conquistando espaço entre os consumidores e consequentemente nas gôndolas em todo o País. Já no "Pavilhão Vermelho", os expositores eram empresas voltadas para a prestação de serviços, como segurança, gráfica e fornecedores de equipamentos para supermercados e o varejo em geral. Participaram ainda, prefeituras de várias partes do Estado e órgãos do setor público em geral. <BR> </p>

</div>
 </BODY></HTML>

Simples né? Salve e veja o resultado.

Quer fazer a mesma coisa com Jquery? Veja aqui!

 

Neste exemplo, não me preocupei com avisos e questões de validação. Aproveito para dizer também, que nem sempre sites validados são um sinal de sites bem construídos.

AAAh, pra quem não me conhece eu sou o João Marcos, Produtor XHTML e arquiteto da informação em Belo Horizonte / MG.

Abraços!