Arquivado em: Tecnologia | Tags: abrir e fechar div, Abrir e fechar divs, abrir e fechar divs usando sinal de menos e de mais, sinal de -
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 >>> 
mais.gif >>> 
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.
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!
2 Comentários até o momento
Deixe um comentário
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Este é o mestre Jhou para quem não conheçe. Arquiteto de informação de primeira…
Comentário por Eudis Lohner 11 Fevereiro, 2009 @ 4:54 pmcara, o primeiro codigo simples q realmente funcionou em todos os navegadores. parabens e obrigado!
Comentário por ettore 4 Novembro, 2009 @ 8:53 am