toggle 내용 보이기 감추기

Remark : 클릭시 div 내용 보이기

Html + CSS + JQuery


<!DOCTYPE html>
<html lang="ko">
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge;" />
<head>  
  
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
       crossorigin="anonymous">
</script>
<script>
	$(document).ready(function () {
		jQuery('.button').on('click', function (e) {
			e.preventDefault();
			var box = jQuery(this).closest('.Rulebox');
			var closestBody = box.find('.Rulebody');
			jQuery('.Rulebody').not(closestBody).hide(); // Hide all except above div

			jQuery(closestBody).toggle(); // if visible hide it else show it
		});
	});
</script>
</head>
 
<body>
 
<div class="Rulebox">
	<a href="#" class="button">규정영문 보기 </a>
	<br/>
	<div class="Rulebody" style="display:none;">
	규정 0 보기<br/>
	내용 내용<br/>
	내용 내용<br/>
	내용 내용<br/>
	</div>
</div> 

<br/>

 
<div class="Rulebox">
	<a href="#" class="button">규정영문 보기 </a>
	<br/>
	<div class="Rulebody" style="display:none;">
	규정 2 보기<br/>
	내용 내용<br/>
	내용 내용<br/>
	내용 내용<br/>
	</div> 
</div> 
 
</body>
</html>

<!DOCTYPE html>

<head>

crossorigin="anonymous">

</script>

$(document).ready(function () {

jQuery('.button').on('click', function (e) {

e.preventDefault();

var box = jQuery(this).closest('.Rulebox');

var closestBody = box.find('.Rulebody');

jQuery('.Rulebody').not(closestBody).hide(); // Hide all except above div

jQuery(closestBody).toggle(); // if visible hide it else show it

});

</script>

</head>

<body>

<br/>

규정 0 보기<br/>

내용 내용<br/>

</div>

<br/>

<br/>

규정 2 보기<br/>

내용 내용<br/>

</div>

</body>

</html>