WEBデザイナーribluecatの個人サイトです。イメージ素材のフリー提供もしています。

JavaScriptで収納

JavaScriptで余計な部分を収納し、リンクをクリックすることで隠した部分を表示します。 もちろん画像も可能です、ページが長くなるときなど意外と便利！

サンプル ここをクリック！


とりあえず、ソースを貼っときますので下記の二つをコピーぺして使ってください。


JavaScriptはこれをコピー

<script type="text/JavaScript">
<!--
function dd(obj){
    if(document.getElementById){document.getElementById(obj).style.display=='none'?document.getElementById(obj).style.display='':document.getElementById(obj).style.display='none'}
    else if(document.all){document.all(obj).style.display=='none'?document.all(obj).style.display='':document.all(obj).style.display='none'}
    else if(document.layers){document.layers[obj].display=='none'?document.layers[obj].display='':document.layers[obj].display='none'}
}
//-->
</script>


HTMLはここをコピー
<!--/*/-->
<div class="fold">
<a href="javascript:void(0)" style="cursor: pointer; text-decoration: none;" onClick="dd('no01')">
ここをクリック！</a>
<div style="display: none;" id="no01">みえた？<img src="http://ribluecat.com/web/images/brown_cat.jpg" width="150" height="145" /></div>
</div>  
<!--/*/-->

web メモ一覧

※注意
このページは個人ブログ＆制作メモ的な場所ですので、定期更新また情報の正確性については保証いたしかねます。
記事に対してのコメントやトラックバックは受け付けておりませんが、管理者に伝えたいことがある場合はお問い合わせフォームまでご連絡をお願いいたします。
　→フォーム