자바스크립트 토글 컨텐츠 함수 정보
자바스크립트 토글 컨텐츠 함수
관련링크
본문
샘플예제 - http://www.mediaplayer.kr/main/tip/55
https://sir.kr/qa/461937 - 질문글도 있고 해서 함수를 하나 만들어 보았습니다.
이건 .toggle-title 과 .toggle-body 라는 클래스를 물고 늘어져서 만든 것입니다.
아래처럼 코드를 사용하면 되구요.
<div id=아이디>
<div class=toggle-title>제목1</div>
<div class=toggle-body>내용1</div>
<div class=toggle-title>제목2</div>
<div class=toggle-body>내용2</div>
<div class=toggle-title>제목3</div>
<div class=toggle-body>내용3</div>
<div class=toggle-title>제목4</div>
<div class=toggle-body>내용4</div>
</div>
자바스크립트 가장 하단부에
toggleMode("아이디", 1);
로 표현시켜 주세요.
1. 아이디 갯수는 몇개라도 상관이 없습니다. 물론 각개의 아이디는 문자가 달라야 합니다.
2. 태그에서 아이디는 띄워쓰기가 없는 경우 따옴표를 생략해도 되지만 자바스크립트의 함수에서는 반드시 따옴표를 줘야 합니다.
3. 두번째 매개변수는 1과 0 이 있는데 예제 링크에서 1번과 0번은 형태가 다릅니다.
1번은 본인만 접었다 폈다 하는 형태이고 0번은 전체를 접으면서 본인만 열리는 일종의 아코디온 식입니다.
----------
<style>
.toggle-title { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; text-align:center; font-weight:bold; cursor:pointer; background-color:#eeeeee; margin-top:5px; }
.toggle-body { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; background-color:#ffffff; border-top:none; display:none; }
</style>
<div id=toggleDiv_1>
<div class=toggle-title style=margin-top:0px>비트겐슈타인 [1] : 1889 ~ 1918</div>
<div class=toggle-body>
1889년 비엔나에서 오스트리아의 거대한 강철 회사 주인의 5남 3녀의 막내아들로 출생.
</div>
<div class=toggle-title>비트겐슈타인 [2] : 1919 ~ 1936</div>
<div class=toggle-body>
1919 거액의 유산을 포기하고 학교 선생이 되기 위해 교사양성교육 과정에 등록
</div>
<div class=toggle-title>비트겐슈타인 [3] : 1938 ~ 1951</div>
<div class=toggle-body>
1938 케임브리지 대학에서 철학을 가르침. 영국으로 귀화. 이 시기의 강의가 『미학, 심리학, 종교적 믿음에 관한 강의의 대화』(1966)란 이름으로 사후 출판
</div>
</div>
<div id=toggleDiv_2 style=margin-top:30px>
<div class=toggle-title style=margin-top:0px>GIRL [1]</div>
<div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/uUNEr/btrynhBrJMz/0UkzK1q9qYZgdnNddSeCH0/img.jpg></div>
<div class=toggle-title>GIRL [2]</div>
<div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/uzivd/btrymi1GOBC/Jw0i2stTZ5QjIdbhCZ3Slk/img.jpg></div>
<div class=toggle-title>GIRL [3]</div>
<div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/d8q9Gi/btryn9JUK5w/MHLQDcAwUbvPAolHGdvuTK/img.jpg></div>
<div class=toggle-title>GIRL [4]</div>
<div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/cBci8P/btryjEEoxBt/BmR5AU3KnSNTAgsALg6CcK/img.jpg></div>
<div class=toggle-title>GIRL [5]</div>
<div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/VIqgX/btryoZAiE4H/R0DikovgINDXvMlua1Difk/img.jpg></div>
</div>
<script>
function toggleMode(...toggle) {
this["toggle_" + toggle[0]] = this[toggle[0]];
this["toggle_" + toggle[0]]._style = toggle[1];
this["toggle_" + toggle[0]]._title = this["toggle_" + toggle[0]].querySelectorAll(".toggle-title");
this["toggle_" + toggle[0]]._body = this["toggle_" + toggle[0]].querySelectorAll(".toggle-body");
for (tt = 0; tt < this["toggle_" + toggle[0]]._title.length; tt++) {
this["toggle_" + toggle[0]]._title[tt].tt = tt;
this["toggle_" + toggle[0]]._title[tt].onclick = function() {
for (tb = 0; tb < window["toggle_" + toggle[0]]._body.length; tb++) {
if (window["toggle_" + toggle[0]]._style) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
else {
if (tb == this.tt) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
else window["toggle_" + toggle[0]]._body[tb].style.display = "none";
}
}
}
}
}
toggleMode("toggleDiv_1", 1);
toggleMode("toggleDiv_2", 0);
</script>
추천
7
7
댓글 12개
좋아요, 감사 합니다.
</div>가 빠졌어요.
<div class=toggle-title>비트겐슈타인 [2] : 1919 ~ 1936</div>
</div>가 빠졌어요.
@들레아빠 감사합니다. 수정하였습니다.
덜렁이는 수가 없네요.ㅋ
덜렁이는 수가 없네요.ㅋ
오오~ 마침 필요한 기능이었는데 감사합니다! ^-^
추천 꾹 눌러드렸어요 :)
비트겐슈타인의 일생에 관하여도 덕분에 잘 읽었습니다!!
나치의 오스트리아 병합 때문에 케임브리지로 간 것이죠??
히틀러와 비트겐슈타인이 동문이었다는데 정말 악연이군요~ ㅠㅠ
멘델스존이나 비트겐슈타인은 유대계 갑부 집안의 천재라는 공통점이 있는데
그들의 삶의 방식은 많이 달랐네요~!
추천 꾹 눌러드렸어요 :)
비트겐슈타인의 일생에 관하여도 덕분에 잘 읽었습니다!!
나치의 오스트리아 병합 때문에 케임브리지로 간 것이죠??
히틀러와 비트겐슈타인이 동문이었다는데 정말 악연이군요~ ㅠㅠ
멘델스존이나 비트겐슈타인은 유대계 갑부 집안의 천재라는 공통점이 있는데
그들의 삶의 방식은 많이 달랐네요~!
@Innisfree
비트겐슈타인의 아버지는 철강왕으로 오스트리아 갑부 서열 2위였습니다.
그래서 아이들을 학교에 보내지 않았습니다. 모두 가정교사로 해결했는데 음악 가정교사 중에는 브람스, 미술 가정교사 중에는 로댕이나 클림트가 있었다고 하네요.
막내였던 비트겐슈타인은 공학에 관심이 많았는데 마땅한 공학 가정교사도 없고 아버지도 철강업의 대를 이어준다면 공학을 전공하는 것도 괜찮다 싶어서 린츠공고에 입학을 했습니다.
히틀러는 비트겐슈타인의 2년 후배였어요. 나이는 동갑이었는데 히틀러의 환경이 열악하다 보니 고등학교 재수를 한 모양입니다.ㅋ
서로 강한 접촉점은 없었다고 합니다만 둘이 같이 찍은 단체사진은 있습니다.
우리나라에서 2002년 월드컵 멤버였던 최성용(비주전)이 이 린츠의 프로팀에서 활약을 했습니다.
비트겐슈타인은 전공을 비행기공학으로 정하고 당시 그쪽의 명문이었던 영국의 맨체스터로 유학을 가서 항공학을 공부합니다. 그런데 항공학을 하던 중 비행기의 동작을 가능하게 하는 수학적 문제를 대하면서 관심이 바뀌지요. "도대체 수학이란 무엇인가?"라는 관심이지요.
그러니까 관심은 공학과 수학이 아니라 수리철학과 논리철학으로 화두가 바뀌면서 이 분야 세계 최고였던 독일 예나대학의 프레게를 찾아 갑니다.
프레게는 우리가 학창 시절 배웠던 진리표 즉 p이면 q이다와 같은 진리함수를 최초로 고안한 사람인데 프레게는 자신은 나이가 들었으니 젊은 학자에게 배우라며 케임브리지에 있는 러셀을 소개시켜 주면서 비트겐슈타인은 프레게가 써준 초대장을 가지고서 영국의 케임브리지로 가게 됩니다.
나치의 오스트리아 병합은 그 훨씬 뒤의 일이고 국적이 없어진 비트겐슈타인은 그 때 영국에 망명신청을 한 거구요.
비트겐슈타인의 전기는 레이몽크의 "천재의 의무"라는 책에 보면 자세히 나와 있습니다.
이 책은 진짜 재미있어요.
기억나는 것 몇 가지가 비트겐슈타인은 교수시절 정말 가르치는 법이 독특했다고 하네요.
강의를 하다가 학생이 어떤 질문을 던지면 "그래 잠시 생각해 보자"라고 말하고서는 20분 내지 30분 또는 그 이상 아무 말도 하지 않고 "필사적으로" 사유했다고 합니다. 그러다 맘에 안 들면 혼잣말로 "참 형편없는 훈장이네" 로 독백을 하고... 비트겐슈타인이 생각하는 동안 학생들도 요지부동... 강의시간이 그렇게 긴 침묵으로 진행될 때가 많았다고 합니다.
악마와 같은 카리스마가 있어서 어느날 강의를 하다가 갑자기 엄숙하게 내가 지금 이 벽을 뚫고 저 강의실로 넘어갈 것이다라고 농담을 했는데 학생들이 모두 오들오들 떨었다고 합니다. 벽을 뚫고 지나가면 천정이 내려앉아서 껄려 죽을 것 같다는 느낌이 전해져서요. 학생 중 하나는 건물이 무너지면 어찌하나 싶어서 의자를 너무 꽉 잡아 손바닥이 얼얼했다는 일화가 있습니다.
물론 믿기지 않으시겠지만... 누구라도 농담이라 생각하겠지만 거기에 있는 모든 사람들이 공포를 느꼈습니다. 그들이 바보도 아니고 케임브리지 석박사 과정은 초엘리트들만이 들어가는 곳인데... 비트겐슈타인이 내뿜는 강렬한 카리스마는 그 순간에 어떤 말을 해도 믿을 수 밖에 없을 만큼 초인적이었다고 하네요.
제자인 맽컴의 집에서 묵었을 때 갑자기 비트겐슈타인은 제자와 제자 부인에게 재미있는 놀이를 해 보자고 했습니다. 일명 태양계 놀이라고 맬컴의 아내가 태양이 되고 맬컴이 지구, 비트겐슈타인이 달이 되어서 공전하는 놀이인데 가장 늙은 비트겐슈타인이 가장 힘든 역할을 맡았음에도 불구하고 땀을 뻘뻘 흘리면서 놀이에 집중하며 즐거워했다는 이야기 등등...
말이 길어졌습니다.ㅋ 여튼 추천해 주셔서 감사합니다.
비트겐슈타인의 아버지는 철강왕으로 오스트리아 갑부 서열 2위였습니다.
그래서 아이들을 학교에 보내지 않았습니다. 모두 가정교사로 해결했는데 음악 가정교사 중에는 브람스, 미술 가정교사 중에는 로댕이나 클림트가 있었다고 하네요.
막내였던 비트겐슈타인은 공학에 관심이 많았는데 마땅한 공학 가정교사도 없고 아버지도 철강업의 대를 이어준다면 공학을 전공하는 것도 괜찮다 싶어서 린츠공고에 입학을 했습니다.
히틀러는 비트겐슈타인의 2년 후배였어요. 나이는 동갑이었는데 히틀러의 환경이 열악하다 보니 고등학교 재수를 한 모양입니다.ㅋ
서로 강한 접촉점은 없었다고 합니다만 둘이 같이 찍은 단체사진은 있습니다.
우리나라에서 2002년 월드컵 멤버였던 최성용(비주전)이 이 린츠의 프로팀에서 활약을 했습니다.
비트겐슈타인은 전공을 비행기공학으로 정하고 당시 그쪽의 명문이었던 영국의 맨체스터로 유학을 가서 항공학을 공부합니다. 그런데 항공학을 하던 중 비행기의 동작을 가능하게 하는 수학적 문제를 대하면서 관심이 바뀌지요. "도대체 수학이란 무엇인가?"라는 관심이지요.
그러니까 관심은 공학과 수학이 아니라 수리철학과 논리철학으로 화두가 바뀌면서 이 분야 세계 최고였던 독일 예나대학의 프레게를 찾아 갑니다.
프레게는 우리가 학창 시절 배웠던 진리표 즉 p이면 q이다와 같은 진리함수를 최초로 고안한 사람인데 프레게는 자신은 나이가 들었으니 젊은 학자에게 배우라며 케임브리지에 있는 러셀을 소개시켜 주면서 비트겐슈타인은 프레게가 써준 초대장을 가지고서 영국의 케임브리지로 가게 됩니다.
나치의 오스트리아 병합은 그 훨씬 뒤의 일이고 국적이 없어진 비트겐슈타인은 그 때 영국에 망명신청을 한 거구요.
비트겐슈타인의 전기는 레이몽크의 "천재의 의무"라는 책에 보면 자세히 나와 있습니다.
이 책은 진짜 재미있어요.
기억나는 것 몇 가지가 비트겐슈타인은 교수시절 정말 가르치는 법이 독특했다고 하네요.
강의를 하다가 학생이 어떤 질문을 던지면 "그래 잠시 생각해 보자"라고 말하고서는 20분 내지 30분 또는 그 이상 아무 말도 하지 않고 "필사적으로" 사유했다고 합니다. 그러다 맘에 안 들면 혼잣말로 "참 형편없는 훈장이네" 로 독백을 하고... 비트겐슈타인이 생각하는 동안 학생들도 요지부동... 강의시간이 그렇게 긴 침묵으로 진행될 때가 많았다고 합니다.
악마와 같은 카리스마가 있어서 어느날 강의를 하다가 갑자기 엄숙하게 내가 지금 이 벽을 뚫고 저 강의실로 넘어갈 것이다라고 농담을 했는데 학생들이 모두 오들오들 떨었다고 합니다. 벽을 뚫고 지나가면 천정이 내려앉아서 껄려 죽을 것 같다는 느낌이 전해져서요. 학생 중 하나는 건물이 무너지면 어찌하나 싶어서 의자를 너무 꽉 잡아 손바닥이 얼얼했다는 일화가 있습니다.
물론 믿기지 않으시겠지만... 누구라도 농담이라 생각하겠지만 거기에 있는 모든 사람들이 공포를 느꼈습니다. 그들이 바보도 아니고 케임브리지 석박사 과정은 초엘리트들만이 들어가는 곳인데... 비트겐슈타인이 내뿜는 강렬한 카리스마는 그 순간에 어떤 말을 해도 믿을 수 밖에 없을 만큼 초인적이었다고 하네요.
제자인 맽컴의 집에서 묵었을 때 갑자기 비트겐슈타인은 제자와 제자 부인에게 재미있는 놀이를 해 보자고 했습니다. 일명 태양계 놀이라고 맬컴의 아내가 태양이 되고 맬컴이 지구, 비트겐슈타인이 달이 되어서 공전하는 놀이인데 가장 늙은 비트겐슈타인이 가장 힘든 역할을 맡았음에도 불구하고 땀을 뻘뻘 흘리면서 놀이에 집중하며 즐거워했다는 이야기 등등...
말이 길어졌습니다.ㅋ 여튼 추천해 주셔서 감사합니다.
@비타주리 덕분에 많이 배웠습니다~ 감사합니다! ^-^
비트겐슈타인이 케임브리지로 간 것은 버트런드 러셀에게 수학하기 위한 것이고
시기상 1차 대전이 시작되기 전이군요 ㅎㄷㄷ
제가 잠시 카를 포퍼와 헷갈린 것 같습니다 ㅠㅠㅠㅠㅠ
아돌프 히틀러는 실업학교(Realschule) 중등과정까지는 무난히 진학했으나
고등과정에서 수학에서 낙제를 받는 등 부진한 성적으로 유급을 당하다가
결국 자퇴한 것으로 알고 있네요~ ㅠㅠ
그런데 비트겐슈타인은 1차 대전 막판에 이탈리아 군에 포로가 된 것으로 알고 있는데요~
아주리와 비트겐슈타인은 오묘한 조합인 것 같습니다!! :)
그럼 즐겁고 뜻깊은 선거일 오후 되세요~! ^^
항상 감사드립니다!!
비트겐슈타인이 케임브리지로 간 것은 버트런드 러셀에게 수학하기 위한 것이고
시기상 1차 대전이 시작되기 전이군요 ㅎㄷㄷ
제가 잠시 카를 포퍼와 헷갈린 것 같습니다 ㅠㅠㅠㅠㅠ
아돌프 히틀러는 실업학교(Realschule) 중등과정까지는 무난히 진학했으나
고등과정에서 수학에서 낙제를 받는 등 부진한 성적으로 유급을 당하다가
결국 자퇴한 것으로 알고 있네요~ ㅠㅠ
그런데 비트겐슈타인은 1차 대전 막판에 이탈리아 군에 포로가 된 것으로 알고 있는데요~
아주리와 비트겐슈타인은 오묘한 조합인 것 같습니다!! :)
그럼 즐겁고 뜻깊은 선거일 오후 되세요~! ^^
항상 감사드립니다!!
@Innisfree
1차대전은 스스로 지원해서 갔습니다.
우리나라 갑부아들들과는 종자가 다르지요. 그것도 영국 유학 중에 귀국해서 지원했는데 집안에 주변사람들이 너 미쳤느냐고 극구만류 했었구요.
훈장도 받았습니다. 상관에게 가장 위험한 곳으로 보내달라고 탄원서를 넣기까지 합니다.
포로수용소에서는 같은 포로들에게 칸트를 공부시켰다고 하네요.
2차대전때도 지원을 하려고 했는데 전투병으로는 나이제한에 걸려서.ㅋ 그래서 후방에서 의무지원을 했습니다.
나라사랑이니 국민을 위하여니 입만 살은 놈들보다 휠 진국인 사람이었습니다.
1차대전은 스스로 지원해서 갔습니다.
우리나라 갑부아들들과는 종자가 다르지요. 그것도 영국 유학 중에 귀국해서 지원했는데 집안에 주변사람들이 너 미쳤느냐고 극구만류 했었구요.
훈장도 받았습니다. 상관에게 가장 위험한 곳으로 보내달라고 탄원서를 넣기까지 합니다.
포로수용소에서는 같은 포로들에게 칸트를 공부시켰다고 하네요.
2차대전때도 지원을 하려고 했는데 전투병으로는 나이제한에 걸려서.ㅋ 그래서 후방에서 의무지원을 했습니다.
나라사랑이니 국민을 위하여니 입만 살은 놈들보다 휠 진국인 사람이었습니다.
@비타주리 옙 오스트리아-헝가리 제국 육군에 자원 입대하여
동부전선 등에서 맹활약하여 훈장을 받은 것으로 알고 있습니다 ^^
히틀러는 오-헝 제국군에 병역기피를 했었죠 -_-;;;
그런데 동료 포로들에게 칸트를 가르쳤다니 제가 동료였으면 머리가 아팠을 것 같네요 ㅎㅎ
헤겔을 가르치지 않은 것이 그나마 다행인지 모르겠습니다~
학창시절에 '열린사회와 그 적들'이나 '과학혁명의 구조'는 읽었는데
비트겐슈타인의 저서는 감히 범접할 수 없었습니다 ㅠㅠ
비타주리 님 덕분에 간만에 철학서적을 좀 읽어봐야겠네요~!
그럼 저녁식사 맛있게 드시고 편안한 저녁 되세요 :)
동부전선 등에서 맹활약하여 훈장을 받은 것으로 알고 있습니다 ^^
히틀러는 오-헝 제국군에 병역기피를 했었죠 -_-;;;
그런데 동료 포로들에게 칸트를 가르쳤다니 제가 동료였으면 머리가 아팠을 것 같네요 ㅎㅎ
헤겔을 가르치지 않은 것이 그나마 다행인지 모르겠습니다~
학창시절에 '열린사회와 그 적들'이나 '과학혁명의 구조'는 읽었는데
비트겐슈타인의 저서는 감히 범접할 수 없었습니다 ㅠㅠ
비타주리 님 덕분에 간만에 철학서적을 좀 읽어봐야겠네요~!
그럼 저녁식사 맛있게 드시고 편안한 저녁 되세요 :)
아주 멋지네요!! 요즘 많이 쓰이는 아코디언, 필요한 거였는데!! 멋집니다~! 이렇게 쉽게 구현이 가능하다니..ㅎ
슬라이딩이 부드럽게 펼쳐지는건 욕심이겠죠? ㅎ.. 감사
슬라이딩이 부드럽게 펼쳐지는건 욕심이겠죠? ㅎ.. 감사
@앨리스인체인
감사합니다. 슬라이딩 움직임의 경우 css 애니메이션을 갖다 붙이면 될 거에요.
그런데 css처리는 등속 움직임이라 그리 안 땡기네요.
나중에 극한값 탄성움직임 슬라이드 코드를 만들면 공유할게요.
사용자가 쉽게 쓰려면 어쨌거나 함수코딩을 해야 하는데 그리 쉬운 일은 아닙니다.ㅜㅠ
감사합니다. 슬라이딩 움직임의 경우 css 애니메이션을 갖다 붙이면 될 거에요.
그런데 css처리는 등속 움직임이라 그리 안 땡기네요.
나중에 극한값 탄성움직임 슬라이드 코드를 만들면 공유할게요.
사용자가 쉽게 쓰려면 어쨌거나 함수코딩을 해야 하는데 그리 쉬운 일은 아닙니다.ㅜㅠ
@비타주리 와우.!! 그런 방법들이 있었군요.. 좋은 정보 다시한번 감사합니다.
좋아요, 감사요^^
감사합니다.
