spoiler html :
bonjour nous allons bvoir dans ce tutoriel comment faire des spoiler html et jsvoici un spoiler classique qui prend autant de ligne que son contenu
spoiler
comme vous êtes peut être pressé j'ai pas fais un code pour le head et pour le body mettez tous dans le body et de plus j'ai mis des lien absolu entier comme çaça vous réduit le code
code:
<div class="c1" onclick="javascript:montrer_spoiler('spoiler2')"><strong>spoiler</strong>
<script type="text/javascript">
function montrer_spoiler(value){var actual=document.getElementById(value).style.visibility;if (actual=='visible'){document.getElementById(value).style.visibility='hidden';}else{document.getElementById(value).style.visibility='visible';}} </script>
<dl style="visibility: hidden;" id="spoiler2">
<dd>texte c<br>
</dd>
</dl>
</div>
<div class="c1" onclick="javascript:montrer_spoiler('spoiler2')"><strong>spoiler</strong>
<script type="text/javascript">
function montrer_spoiler(value){var actual=document.getElementById(value).style.visibility;if (actual=='visible'){document.getElementById(value).style.visibility='hidden';}else{document.getElementById(value).style.visibility='visible';}} </script>
<dl style="visibility: hidden;" id="spoiler2">
<dd>texte c<br>
</dd>
</dl>
</div>
voici maintenant un spoiler compressable qui en plus de prendre moins de place est moins lourd que le spoiler précédent
compatibilité:firefox; ie6 et +;opéra ; safaris et google chrome
Spoiler
code:
<div class="c1"
onclick="pchild=this.getElementsByTagName('p'); if(pchild[0].style.visibility!='hidden'){pchild[0].style.visibility='hidden'; pchild[0].style.height='0';}else{pchild[0].style.visibility=''; pchild[0].style.height=''}">Spoiler
<p style="">texte<br>
cach<br>
cach<br>
cach<br>
</p>
</div>
<div class="c1"
onclick="pchild=this.getElementsByTagName('p'); if(pchild[0].style.visibility!='hidden'){pchild[0].style.visibility='hidden'; pchild[0].style.height='0';}else{pchild[0].style.visibility=''; pchild[0].style.height=''}">Spoiler
<p style="">texte<br>
cach<br>
cach<br>
cach<br>
</p>
</div>
spoiler speciaux :
3 autres façon
code général
pour les 3
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
code
spoiler radio:
<div class="spoiler"><input checked="checked"
onclick="showSpoiler(this);" value="Show/Hide"
type="radio">
<div class="inner" style="display: none;"><a>This
is a
spoiler!</a>
</div>
</div>
<div class="spoiler"><input checked="checked"
onclick="showSpoiler(this);" value="Show/Hide"
type="radio">
<div class="inner" style="display: none;"><a>This
is a
spoiler!</a>
</div>
</div>
code
spoiler bouton
<div class="spoiler"><br>
<input onclick="showSpoiler(this);" value="Show/Hide"
type="button">
<div class="inner" style="display:
none;"><a>This
is a
spoiler!</a>
</div>
</div>
code
spoiler checkbox:
<div class="spoiler"><br>
<input name="1" onclick="showSpoiler(this);"
value="Show/Hide" type="checkbox">
<div class="inner" style="display: none;"><a>This
is a
spoiler!</a>
</div>
</div>
<div class="spoiler"><br>
<input name="1" onclick="showSpoiler(this);"
value="Show/Hide" type="checkbox">
<div class="inner" style="display: none;"><a>This
is a
spoiler!</a>
</div>
</div>
