JQueryのDIV表示非表示を教えてください。

JQueryのDIV表示非表示を教えてください。
リンクをクリックすると、意図するDivを表示させています。
再度、リンクをクリックすると、閉じる処理を教えてください。
表示したdivをクリックしたら閉じる処理はできたのですが。。。

<!doctype html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$(".pop").click(function() {
	  if ($("." + pop_class).is(':hidden')) {
			$(".pop_child").hide();
	  } else {
		var pop_class = $(this).attr("data");
		$("." + pop_class).show();
	  }
});
	$(".pop_child").click(function() {
	  $(".pop_child").css("display", "none");
	});
});
</script>

<style>
.boxc { position:relative; }
.pop {
	text-decoration:underline;
	cursor: pointer;
	color:#442714; 
}
.pop_child {	
	display:none;
	cursor: pointer;
	position:absolute;
	z-index:1;
	width:50%;
	margin-top:10px;
	background:#CCC;
	}
	
</style>

</head>

<body id="top">
		
<div>
  <dl>

	<dt>2016.01.01</dt>
	<dd class="boxc"><a class="pop" data="w5">w5をクリックw5をクリック</a>です。</dd>
    <div class="pop_child w5">
    <div class="arrow_box">
         <p>w5の内容内容w5の内容内容w5内容内容</p>
    </div></div>
    
    
	<dt>2016.01.01</dt>
	<dd class="boxc"><a class="pop" data="w4">w4をクリックw4をクリック</a>です。</dd>
    <div class="pop_child w4">
    <div class="arrow_box">
         <p>w4の内容内容w4の内容内容w4の内容内容</p>
    </div></div>
                        
                        
	<dt>2016.01.01</dt>
	<dd class="boxc"><a class="pop" data="w3">w4をクリックw4をクリック</a>に参加・発表しました。</dd>
    <div class="pop_child w3">
    <div class="arrow_box">
         <p>w3の内容内容w3の内容内容w3の内容内容</p>
    </div></div>
                                              
  </dl>
	</div>


</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1$(".pop").click(function() {
2  $("." + $(this).attr("data")).toggle();
3});
4

トグルが便利じゃないですか？

投稿2016/11/08 09:50

hiim

総合スコア1689

fnwakc

2016/11/08 23:59

ありがとうございます！

行動規範の内容に同意します

javascript
1$(".pop").click(function () {
2  var pop_class = $(this).attr("data");
3  if ($("." + pop_class).is(':hidden')) {
4    $("." + pop_class).show();
5  } else {
6    $("." + pop_class).hide();
7  }
8});