새소식
반응형
WEB/jQuery
[jQuery] 제이쿼리를 slideToggle을 사용법 알아보기.
- -
반응형
2021-05-01
제이쿼리 문법으로 마치 2 Depth 구조와 같은 느낌을 줄 수 있는 슬라이드 effect 함수가 존재하는데, 이 함수의 사용법을 알아보자.
- slideDown() / slideUp()
slideDown() / slideUp() 이 두 함수는 단순 슬라이드를 내리고 올리는 기능만 가능하다. 때문에 보통은 잘 사용되지 않고 올리고 내리는 두 가지 기능이 모두 되는 slideToggle이 사용되는 경우가 많다.
- slideToggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
$("#slide").slideToggle("slow");
})
})
</script>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: tomato;
border: 2px solid green;
}
#slide{
display:none;
}
</style>
</head>
<body>
<div id="div1">Hello</div>
<div id="slide">Hello Hello</div>
</body>
</html>
예제 코드는 아래와 같으며, 최초 접속시에는 아래와 같은 화면이 나타난다. slideToggle()은 현재 div1 태그가 클릭 시에 발생되도록 걸어두었으며, 아래의 Hello div 영역을 클릭하면 동작하게 된다.
아래는 클릭시 동작되는 화면이다. 기존의 div 아래 새로운 div가 천천히 나타나게 된다. 이후 다시 클릭해주면 원래의 Hello 한 개만 있는 화면으로 돌아가게 된다.
메인 이미지 출처: Photo by Zidhan Ibrahim on Unsplash
반응형
'WEB > jQuery' 카테고리의 다른 글
| [JQuery] 선택된 라디오 버튼만 checked 되게 설정하기 (0) | 2023.09.07 |
|---|---|
| [jQuery] ajax로 window.location.href = "CSV 파일 다운로드" 구현 (0) | 2023.06.06 |
| [jQuery] 제이쿼리를 이용한 href(링크) 부여 attr/location (1) | 2021.04.17 |
| [jQuery] 제이쿼리 hide / show 메소드 알아보기 (0) | 2021.04.14 |
| [jQuery] 제이쿼리 append 와 after 차이 알아보기 (0) | 2021.03.31 |
Contents
소중한 공감 감사합니다