[jQuery] 아코디언(accordian) 메뉴, slideUp / slideDown 사용하기

jquery로 만든 아코디언(accordian) 메뉴입니다.
아코디언 메뉴는 제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 축소되는 기능을 말합니다.
스타일 태그를 사용해 제목은 노출시켜놓고, 내용은 숨겨 놓았습니다.
제목을 클릭했을 때 내용의 상태를 보고 숨겨져 있으면 활성화시키고, 반대로 활성화돼있으면 숨김 처리합니다.

간단한 내용이므로 소스 확인 해보시고 응용하시면 됩니다.

 

<style>
.accordion p a {padding:15px 30px 10px 20px;  line-height:26px; color:red;display:block;position:relative;outline:0;text-decoration:none;background-position:30px center;box-sizing:border-box;}
.accordion div {
padding:5px 20px 25px 20px; line-height:20px; position:relative;height:auto;display:none;background-position:30px 8px;line-height:20px;color:blue;}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {    
var accordion_tab = $('.accordion p'), accordion_content = $('.accordion div');
	//accordion p tag click
	accordion_tab.on('click', function(e){
		//tab link 비활성화
		e.preventDefault();
		//활성화 된 class 제거
		accordion_tab.removeClass('active');
		//accordion div 내용 숨기기
		accordion_content.slideUp('normal');
		//tab이 숨겨져 있으면 활성화 시키고 div 내용 펼치기
		if($(this).next().is(':hidden') == true) {
			$(this).addClass('active');
			$(this).next().slideDown('normal');
		 } 			  
 });
});
</script>
 <div class="accordion_wrap" style="border:1px solid; width:100%;">
	<div class="accordion">                        	
		<section id="one">
			<p><a href="#one">어떤 서비스 입니까?</a></p>
			<div>
				<p>후린개발자 블로그 입니다. 반갑습니다.</p>
			</div>
		</section>			
		<section id="two">
			<p><a href="#two">사용법이 어떻게 되나요?</a></p>
			<div>
				<p>블로그 게시글을 정독 해주시면 감사 하겠습니다.</p>
			</div>
		</section>

		<section id="three">
			<p><a href="#three">클릭 해주세요.</a></p>
			<div>
				<p>클릭 해주셔서 감사합니다.</p>
			</div>
		</section>
		<section id="four">
			<p><a href="#four">모든 페이지에서 지원하나요?</a></p>
			<div>
				<p>class 명칭을 확인 하시면 쉽게 적용 가능 하십니다. </p>
			</div>
		</section>                            
	</div>
</div>

 

↓↓↓↓↓ 예제 입니다. (클릭해보세요.)

 

어떤 서비스 입니까?

후린개발자 블로그 입니다. 반갑습니다.

사용법이 어떻게 되나요?

블로그 게시글을 정독 해주시면 감사 하겠습니다.

클릭 해주세요.

클릭 해주셔서 감사합니다.

모든 페이지에서 지원하나요?

class 명칭을 확인 하시면 쉽게 적용 가능 하십니다.