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!

Anúncios

7 Comentários so far
Deixe um comentário

Este é o mestre Jhou para quem não conheçe. Arquiteto de informação de primeira…

Comentário por Eudis Lohner

cara, o primeiro codigo simples q realmente funcionou em todos os navegadores. parabens e obrigado!

Comentário por ettore

Precisando de truques, estamos ai!

Comentário por jhou

[…] Há um tempo atrás publiquei um post, mostrando como Abrir e fechar Div`S com botao de menos e de mais, usando javascript simples. […]

Pingback por Abrir e fechar div com botao de menos e de mais usando jquery « Pensando um Brasil …

estava procurando por isso, muito obrigado!

Comentário por Jefferson

Massa cara! sugestoes pode pedir ai! abs

Comentário por Jhou

vlws tava procurando por este codigo e o melhor ele funciona no google chrome pq outros que achei por ai quando o google chrome fazia a tradução o botao nao abria ja o seu codigo funciona perfeitamente obrigado…. 🙂

Comentário por XD




Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s



%d blogueiros gostam disto: