Oculta y muestra contenido spoiler tag html

Friday, September 21, 2012

0 Oculta y muestra contenido spoiler tag html

dication.com/pagead/show_ads.js'>"; // -->

Buenas les traigo un script en js que sirve para ocultar y mostrar contenido como los spoiler en los foros pero ahora lo podras usar en tu web de forma sencilla sin mas preambulos...
JS:

    
<script type="text/javascript">  
var show_text = 'Show Spoiler>'  
var hide_text = 'Hide Spoiler<'  
var wlib = {  
    start: function(){  
      document.createElement('spoiler');  
      tag = document.getElementsByTagName('*');  
      for(var i=0;i<tag.length;i++){  
      var name = tag.item(i).nodeName.toLowerCase();  
      var obj = null;  
      if(name == 'spoiler') {  
         obj = new wlib.spoiler(tag.item(i));  
      }  
}  
    },  
    spoiler: function(object){  
    if ( object.childNodes[0].nodeValue) {  
    var content = object.childNodes[0].nodeValue;  
 }else{  
    var content = '';  
}     
    if ( object.attributes.onclick) {  
    cclick = object.attributes.onclick.value  
} else {  
    cclick= ''  
}  
    if (object.attributes.onmouseover) {  
    comov = object.attributes.onmouseover.value  
} else {  
    comov = ''  
}  
    if (object.attributes.childclass) {  
    childclass = object.attributes.childclass.value  
} else {  
    childclass = ''  
}  
    if (object.attributes.btclass) {  
    but_class = object.attributes.btclass.value  
} else {  
    but_class = ''  
}  
    if (object.attributes.aclass) {  
    aclass = object.attributes.aclass.value  
} else {  
    aclass = ''  
}  
    this.div= document.createElement('div')  
    this.div.innerHTML = '<div class="'+but_class+'"><a  ="javascript:voip(0)" class="'+aclass+'" hide="1">'+show_text+'</a></div><div class="'+childclass+'" style="display:none">'+content+'</div>';  
    this.div.className = clase  
    this.div.style.cssText = css  
    this.div.onclick= function(){  
        wlib.process(this)  
        eval(cclick)  
    }  
    this.div.onmouseover= function(){  
        eval(comov)  
    }  
    object.removeChild(object.childNodes[0])  
    object.appendChild(this.div)  
    },  
    process: function(object) {  
        if (object.childNodes[0].childNodes[0].attributes.hide.value == 1) {  
            object.childNodes[1].style.cssText= ''  
            object.childNodes[0].childNodes[0].innerHTML = hide_text  
            object.childNodes[0].childNodes[0].attributes.hide.value = 0  
        } else {  
            object.childNodes[1].style.cssText= 'display: none'  
            object.childNodes[0].childNodes[0].innerHTML = show_text  
            object.childNodes[0].childNodes[0].attributes.hide.value = 1  
        }  
    }  
};  
  
</script>

CSS:

    
.child {  
    word-wrap: break-word;  
    color: #FFF;  
    background: #848484;  
    border: 2px solid #000;  
    width: 600px;  
      -moz-border-radius: 5px;   
  -webkit-border-radius: 5px;  
  padding-left: 5px;  
}  
.wlib, .wlib:visited {  
  background: #222;  
  display: inline-block;   
  padding: 5px 10px 6px;   
  width: 80px;  
  color: #fff;   
  text-decoration: none;  
  -moz-border-radius: 5px;   
  -webkit-border-radius: 5px;  
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  
  border-bottom: 1px solid rgba(0,0,0,0.25);  
  position: relative;  
  cursor: pointer;  
}  
  .large.wlib, .large.wlib:visited      { font-size: 12px; padding: 4px 10px 5px; }  
  
/*Colores-----*/  
  /*Rojo*/  
  .red.wlib, .red.wlib:visited      { background-color: #FF3300; }  
  .red.wlib:hover              { background-color: #CC2900;}  
  /*Negro*/  
  .black.wlib, .black.wlib:visited      { background-color: #1C1C1C; }  
  .black.wlib:hover              { background-color: #000;}  
  /*Azul*/  
  .blue.wlib, .blue.wlib:visited      { background-color: #2424B2; }  
  .blue.wlib:hover              { background-color: #1D1D8E;}  
  /*Verde*/  
  .green.wlib, .green.wlib:visited      { background-color: #008A2E; }  
  .green.wlib:hover              { background-color: #006E25;}

Ahora una mini guia:
Primero debemos poner wlib.start() dentro body onload="" o dentro de un document ready y eso es todo xD
que facil no?xD

ahora las propiedades que se pueden asignar:

    
<spoiler aclass="clase del a del boton" childclass="clase de donde se muestra el contenido" btclass="clase del div que tiene el boton" onclick="evento js si lo clickean" onmouseover="evento js con mouse arriba">contenido que se ocultara pueden ser divs cualquier cosa y luego cerramos el tag</spoiler>

Y eso es todo ahora un demo:
http://dev.blakmoder.com/wlib.html

Espero le sirva a alguien gracias....