ホームページ 表示非表示 HTML CSS JavaScript

教えてください。

現在下記のように
表示非表示切替をクリックで要素を表示非表示
するようにしているのですが、

<div name="toggle1" id="toggle1" style="display:none">
<h3><img src="画像のURL" border="0"><br>
JavaScriptとCSSで指定した要素の<br>表示/非表示を切り替えます。</h3>
</div>
<div>
<a href="#toggle1" onmousedown="if(document.getElementById('toggle1').style.display == 'block')
{document.getElementById('toggle1').style.display = 'none';}
else{document.getElementById('toggle1').style.display = 'block';}">
トグルスイッチ 表示/非表示</a>
</div>


<div name="toggle2" id="toggle2" style="display:none">
<h3><img src="画像のURL" border="0"><br>
JavaScriptとCSSで指定した要素の<br>表示/非表示を切り替えます。</h3>
</div>
<div>
<a href="#toggle2" onmousedown="if(document.getElementById('toggle2').style.display == 'block')
{document.getElementById('toggle2').style.display = 'none';}
else{document.getElementById('toggle2').style.display = 'block';}">
トグルスイッチ 表示/非表示</a>
</div>

<div name="toggle3" id="toggle3" style="display:none">
<h3><img src="画像のURL" border="0"><br>
JavaScriptとCSSで指定した要素の<br>表示/非表示を切り替えます。</h3>
</div>
<div>
<a href="#toggle3" onmousedown="if(document.getElementById('toggle3').style.display == 'block')
{document.getElementById('toggle3').style.display = 'none';}
else{document.getElementById('toggle3').style.display = 'block';}">
トグルスイッチ 表示/非表示</a>
</div>

これで、どこかの表示をクリックすると
そこ以外表示されている要素を非表示にしたいのですが、
どうすればいいでしょうか？

また、表示されるときと非表示されるときに動きを加えたく
フェードインとフェードアウトの要素も入れたいです・・・

質問者からの補足コメント

• すみません・・・
  
  test.htmlなら動きました・・・
  
  動かないのはtest.cgi；；
  
  cgiページは動かないのですか？

  No.2の回答に寄せられた補足コメントです。 補足日時：2017/06/06 15:13

No.4 ベストアンサー 回答者： yambejp 回答日時： 2017/06/06 15:27

ブラウザのF12キーをおして開発ツールを利用して

デバッグしてみてください

この回答へのお礼

ありがとうございます！

原因がわかりました。。。

$←がPerlからHTML出力時に「1000」と変換されてしまっていたためでした。
それを改善すると動きました！

本当にありがとうございます！

お礼日時：2017/06/06 15:31

No.3 回答者： yambejp 回答日時： 2017/06/06 15:17

> cgiページは動かないのですか？

そんなことはないです
cgiページも所詮ユーザーにとってはHTMLです。
cgiページでもクラスなど適正についていますか？

この回答へのお礼

言語はPerlを使用しているのですが

#!/usr/bin/perl

my $CHARSET = 'UTF-8';

print "Content-type: text/html; charset=$CHARSET\n\n";

print <<END;
<!DOCTYPE>


～この間はhtmlページと全く同じです～

END
exit;
1;

お礼日時：2017/06/06 15:23

No.2 回答者： yambejp 回答日時： 2017/06/06 15:05

jQueryの読み込みは

<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

↑↑↑ttpをhttpに

この回答へのお礼

1.12.4でしたか；；

しかし動かないです・・・
読み込むのはhead内でいいですよね？

お礼日時：2017/06/06 15:09

No.1 回答者： yambejp 回答日時： 2017/06/06 14:42

jqueryを利用するならこう

idでやるよりclassでやってください

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script>
$(function(){
$('.dispToggle').hide();
$('.dispToggle ~ div a').on('click',function(e){
var target=$(this).closest('div').prev('.dispToggle');
$('.dispToggle').not(target).fadeOut();
target.fadeToggle();
e.preventDefault();
});
});
</script>

<div name="toggle1" id="toggle1" class="dispToggle">
<h3><img src="画像のURL" border="0"><br>
JavaScriptとCSSで指定した要素の<br>表示/非表示を切り替えます。</h3>
</div>
<div>
<a href="#toggle1">トグルスイッチ 表示/非表示</a>
</div>


<div name="toggle2" id="toggle2" class="dispToggle">
<h3><img src="画像のURL" border="0"><br>
JavaScriptとCSSで指定した要素の<br>表示/非表示を切り替えます。</h3>
</div>
<div>
<a href="#toggle2">トグルスイッチ 表示/非表示</a>
</div>

<div name="toggle3" id="toggle3" class="dispToggle">
<h3><img src="画像のURL" border="0"><br>
JavaScriptとCSSで指定した要素の<br>表示/非表示を切り替えます。</h3>
</div>
<div>
<a href="#toggle3">トグルスイッチ 表示/非表示</a>
</div>

この回答へのお礼

ご回答ありがとうございます。

試しましたが動かないです・・・
jqueryを読み込むには
こうですよね・・・？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …

お礼日時：2017/06/06 14:59