クリックで表示される領域を分けたい

以下のコードで、
「AAA」クリックで、AAAAAAAAAが表示されます。
「BBB」クリックで、BBBBBBBBBが表示されます。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【サンプル：http://m5011782312.k-free.net】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script>
　$(function() {
　　$('a#show_hide').click(function(event){
　　　event.preventDefault();
　　　$('div#hide').toggle();
　　});
　　$('a#show_hide2').click(function(event){
　　　event.preventDefault();
　　　$('div#hide2').toggle();
　　});
　});
</script>
<a href="#" id="show_hide">AAA</a>
<a href="#" id="show_hide2">BBB</a>
<div id="hide" class="hidden" style="display:none">
　AAAAAAAAAが表示されます
</div>
<div id="hide2" class="hidden" style="display:none">
　BBBBBBBBBが表示されます
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

しかし「AAA」クリック後に「BBB」クリックで両方表示されてしまいます。
これを必ずどちらか一つ表示（Aが出てるときはBを消す逆も然り）にしたいのですが、どう書けばよいかわからず泣いています。

どうか教えてもらえませんでしょうか…(´；ω；`)本当に泣きながらやっています。。

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

• このようなことができるのであれば別の方法でも構いません。。
  納品間近のコーディングで怒られながらやっています…( ﾉД`)
  
  あとシュピッ！って出るのでなくて、ゆっくりヌルリとアコーディオンのように出るようにとも言われているのですが、この際は贅沢はいいません…、が、合わせてお分かりのようであれば教えてもらえるとさらに泣いて喜びます…！

    補足日時：2017/07/25 03:41

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/07/25 09:32

こんにちは

基本的には、クリックした時にそれ以外の要素を閉じる処理を入れれば良いだけと思います。
ご提示の例では、要素が2個だけですが、同じような動作をするので、個別のIDで識別するよりも共通のクラスとその順番などを利用して処理した方が簡潔に記述できるような気がしますが…

とりあえず、こんな感じではどうでしょうか？
$(function(){
$('#show_hide, #show_hide2').on('click', function(){
var id = this.id.substr(5);
$('#hide, #hide2').each(function(i, e){
if(e.id == id) $(e).slideToggle();
else $(e).slideUp();
});
});
});

＞ゆっくりヌルリとアコーディオンのように出るようにとも～
具体的な動作はいろいろ考えられると思いますが、上の例ではslideUp、slideDownの動作にしてあります。

この回答へのお礼

fujillin様！
めちゃくちゃにありがとうございました！！！
徹夜で寝落ちしてました…！(´；ω；`)ｳｩｩ
本当に助かりました！！！

お礼日時：2017/07/25 13:56

No.2 回答者： yambejp 回答日時： 2017/07/25 11:33

こんな感じがいいでしょう

<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#show_hide,#show_hide2').on('click',function(e){
e.preventDefault();
$('#'+$(this).data("target")).siblings('div').hide().end().toggle();
});
});
</script>
<a href="#" id="show_hide" data-target="hide">AAA</a>
<a href="#" id="show_hide2" data-target="hide2">BBB</a>
<a href="#" id="show_hide2" data-target="hide3">CCC</a>
<div id="hide" style="display:none">AAAAAAAAAが表示されます</div>
<div id="hide2" style="display:none">BBBBBBBBBが表示されます</div>
<div id="hide3" style="display:none">CCCCCCCCCが表示されます</div>

この回答へのお礼

yambejp様！
ありがとうございました！！
泣きながらやっていたので神様のように感じます(*´Д｀)！！

お礼日時：2017/07/25 13:58