[Bootstrap] collapse

collapse에 필요한 script 선언

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- JQuery CDN 연동 -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

 

script 구문작성

<script type="text/javascript">

$(function() {
	
	$('#btn').on('click', function () { 						// 버튼을 클릭했을 때
		let collapses = $('div.container').find('.collapse');	// 클래스 이름이 collapse인 태그를 찾음
		
		collapses.each(function () { 
			$(this).collapse('toggle');							// toggle을 이용해 버튼을 클릭할 때마다
		}); 													// 열리고 닫힘
	});
});

</script>

 

HTML 작성

<div class="container m-5">
	<div class="collapse" id="collapseExample">
		콜랩스 출력!
	</div>
	<input type="button" id="btn" class="btn btn-outline-dark" value="버튼">
</div>