Meu amigo Fábio Arantes desenvolveu um microformato muito interessante: o HideShow.
Basta você inserir o arquivo hideshow.js em seu HTML e quando quiser fazer o sempre útil hide/show em um objeto (div, ul etc.), basta colocar um id no objeto e no link acrescentar rel=”hideShow|nomeId”.
Fácil, fácil.
hideshow.js
////////////////////////////////////////////////////////////////////////// /////////////////////////Hide Show Microformat...///////////////////////// ///////////////////Created by Fábio Arantes dos Santos//////////////////// ////////////////////////http://www.fabioarantes.com/////////////////////// ////////////////Tested in Firefox and IE6 Works Perfectly///////////////// ////////////////////////////////////////////////////////////////////////// /////////////////////////////////EXAMPLE:///////////////////////////////// ////////////////////////////////////////////////////////////////////////// /* <script language="JavaScript" type="text/javascript" src="hideshow.js"> </script> <h3><a href="#" rel="hideShow|DivIdName">Div Title</a></h3> <div id="DivIdName"> Div Content </div> <h3><a href="#" rel="hideShow|UlIdName">Ul Title</a></h3> <ul id="UlIdName"> <li>List Content 01</li> <li>List Content 02</li> <li>List Content 03</li> </ul> */ ////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// var hideShow = new Object(); var listElement = new Array(); var active = ""; hideShow.show = function () { if(active == arguments[0]){ document.getElementById(arguments[0]).style.display = "none"; active = ""; } else { hideShow.hide(); for(i=0; i<arguments.length; i++){ document.getElementById(arguments[i]).style.display = "block"; active = arguments[i]; } } } hideShow.hide = function (){ for(i=0; i<listElement.length; i++){ document.getElementById(listElement[i]).style.display = "none"; } } hideShow.initialize = function () { var links = document.getElementsByTagName('a'); for(i=0; i<links.length; i++){ var str = links[i].rel.split('|') if(str[0] == "hideShow"){ listElement.push(str[1]); links[i].href = "javascript: hideShow.show('"+str[1]+"');"; } } hideShow.hide(); } function StartApplets() { hideShow.initialize(); } if(navigator.appName != "Microsoft Internet Explorer"){ document.addEventListener( "DOMContentLoaded", StartApplets, false ); } else { setTimeout("hideShow.initialize()", 0); }
[tags]Microformat, Hide, Show, Div[/tags]
You can leave a response, or trackback from your own site.
outubro 8th, 2009 at 16:40
Como criar sub_divs que possam mostrar e recolher dentro das div principal?
tentei assim mais não deu certo:
Div Title
Div Title
Div Content 1
Div Title
Div Content 2
Div Title
Div Content 3
fevereiro 8th, 2010 at 1:25
Até que enfim encontrei uma referência na web que possa ser usada, para mais de um link. Parabens, me quebrou uma árvore.