반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- Linux세팅
- 스레드그룸
- ObjectInputStream
- include지시자
- interrupt()
- Daemon()
- 리눅스셋팅
- ThreadGroup()
- isinterrupted()
- 동기화
- 상관 서브 쿼리
- ID중복
- 리눅스세팅
- String char[] 형변환
- StringReader
- first-of-child
- sleep()메소드
- 아이디중복
- include 지시자
- 표현 언어
- include액션태그
- Linux셋팅
- MemoryStream
- char[] String 형변환
- first-child
- StringWriter
- 메모리스트림
- 상관서브쿼리
- interrupted()
- InputDialog
Archives
- Today
- Total
다연이네
[days03] 토글 버튼 본문
반응형
토글 버튼을 누르면 해당 내용이 출력되도록 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- button*3>{토글버튼-$} -->
<button>토글버튼-1</button>
<div style="background-color: tomato; color: white; border: 1px solid red; padding: 20px">
<h3>제목</h3>
<p>내용</p>
</div>
<br>
<button>토글버튼-2</button>
<div style="background-color: tomato; color: white; border: 1px solid red; padding: 20px">
<h3>제목</h3>
<p>내용</p>
</div>
<br>
<button>토글버튼-3</button>
<div style="background-color: tomato; color: white; border: 1px solid red; padding: 20px">
<h3>제목</h3>
<p>내용</p>
</div>
<br>
<script>
$('div').hide();
/* $('태그명')*/
$('button').click(function () {//button이라는 태그들을 찾아와서 click
//console.log("버튼 클릭됨"); //f12눌러서 Console 확인해보기
//$('div').show(); //전부 보여짐
//$('div').slideToggle(); //전부 접었다 펼졌다
$(this).next().slideToggle(); //버튼 뒤의 객체만 접었다 폈다
}) ;
</script>
</body>
</html>
버튼을 누르면 내용이 부드럽게 내려오고, 한번 더 누르면 부드럽게 올라간다.
반응형
'Web > HTML' 카테고리의 다른 글
[days03] html의 head의 자식 요소 (0) | 2020.12.02 |
---|---|
[days03] iframe (0) | 2020.12.02 |
[days03] 버튼 1. HTML 2. Javascript 3.JQuery (0) | 2020.12.02 |
[days03] 표 만들고 간단한 속성 넣기 (0) | 2020.12.02 |
[days03] emmit 사용법 (0) | 2020.12.02 |
Comments