<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div class="container">		
		<h2>Collapsible Panel 예제</h2>
		<div class="panel-group">
			<div class="panel panel-success">
				<div class="panel-heading">
					<a data-toggle="collapse" href="#collapse2">오로라</a>
				</div>
				<div id="collapse2" class="panel-collapse collapse">
					<div class="panel-body"><img src="or.jpg"></div>
					<div class="panel-footer">오로라는 지구 밖에서 입사하는 대전 입자가 지구 대기권 상층부의 기체와 마찰하여 빛을 내는 현상이다. 이들 입자의 유래는 주로 태양에서 방출된 것이 대부분인데 태양풍을 따라 지구 근처에 왔다가 지구 자기장에 이끌려 대기로 진입하는 것이다.</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>