God might play dice

:: 이글루스에서 More & Less 사용하기

눈love님의 이글루스에서 MORE기능 사용하기를 보고 감추기도 추가하면 좋겠다는 생각에.. 한번 고쳐봤습니다. 아이디어는 눈love님의 것을 연속해서 적용시키는 것이구요. 주의사항은 따옴표와 작은 따옴표를 헛갈리지 않는 것입니다. 그리고 <div>을 다른 줄에 쓰면 중간에 줄이 들어가서 이상해집니다. 또한 눈love님께서 말씀하신 것 처럼 id를 헛갈리면 안되겠죠?

자세한 내용보기
자세한 내용감추기
여기엔 좀더 상세한 설명이 들어가면 좋겠죠?
이미지도 물론 좋겠구요 ^^; 업로드한 이미지를 이곳에 넣을수도 있구요

소스는 다음과 같습니다.

<div id=test_click1><a href="#none" onclick='document.all["test_more"].style.display="block";document.all["test_click1"].style.display="none";document.all["test_click2"].style.display="block"'>이글에 대한 자세한 내용보기</a></div><div id=test_click2 style="display:none"><a href="#none" onclick='document.all["test_more"].style.display="none";document.all["test_click2"].style.display="none";document.all["test_click1"].style.display="block"'>이글에 대한 자세한 내용감추기</a></div><div id=test_more style="display:none">여기엔 좀더 상세한 설명이 들어가면 좋겠죠?
이미지도 물론 좋겠구요 ^^; 업로드한 이미지를 이곳에 넣을수도 있구요</div>

위의 소스는 눈love님이 말씀하신 각자의 글에서 보기는 안됩니다. 대신 따옴표를 없애면 되는데... 연속된 명령을 늘어쓰면서 따옴표를 안붙인다는 것이 불안하기는 하지만, 어쨋튼 IE6, winXP에서는 되네요.

변경한 소스입니다.

<div id='test_click1'><a href="#none" onclick=document.all['test_more'].style.display='block';document.all['test_click1'].style.display='none';document.all['test_click2'].style.display='block'>자세한 내용보기</a></div><div id='test_click2' style="display:none"><a href="#none" onclick=document.all['test_more'].style.display='none';document.all['test_click2'].style.display='none';document.all['test_click1'].style.display='block'>자세한 내용감추기</a></div><div id='test_more' style="display:none">여기엔 좀더 상세한 설명이 들어가면 좋겠죠?
이미지도 물론 좋겠구요 ^^; 업로드한 이미지를 이곳에 넣을수도 있구요</div>

# by jiinny | 2004/01/04 19:15 | Computing, Logging | 트랙백(11) | 핑백(1) | 덧글(16)

트랙백 주소 : http://jiinny.egloos.com/tb/197343
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

Tracked from God might pl.. at 2004/01/27 00:48

제목 : 메뉴바 움직이기 넷스케잎에서도 성공...
<$IMG$>DHTML 뚫어져라 쳐다볼 처지는 아니기 때문에 짬짬히 서핑하면서 웹폰트(비둘기님에서 봄), 사진에 그림자 넣기(1976design) 등도 참고하고 급기야 넷스케잎에서도 hide기능 잘되는 것도 확인했습니다. 사실 별개아닌게, getElementById() 메소드를 사용하면 되는 것이었습니다. element 불러올 때,... 사실 이글루 소스를 보면 되는 것을.. -_-; 변경한 내용과 소스는 다음과 같습니다. 자세한 내용보기자세한 내용감추기여기엔 좀더 상세한 설명이 들어가면 좋겠죠? 이미지도 물론 좋......more

Tracked from Mad Scientist at 2004/02/14 01:17

제목 : 그토록 찾아헤메던...
이글루스에서 More & Less 사용하기 정말 알고 싶었던 기능입니다. 물어보고 싶었지만 머뭇거리고만 있었는데. 이렇게 훌륭하게 만들어 주시는 분들이 계시다니! 이번에 추가된 기능이 바로 그거였군요. More. 하지만 이글루스건 왠지 화면 전체가 로딩되어서 불편. 여기의 이 소스는 정말로 신이여 감사합니다! 버젼이랍지요 ^^ <div id='test_click1'><a href="#none" onclick=document.all['test_more'].style.display='block';doc......more

Tracked from 春,,우유나무의 씨앗뿌.. at 2004/02/15 03:38

제목 : ㅈㄹ
가나다라마바사 자세한 내용보기자세한 내용감추기연습..감추기도 돼.....more

Tracked from God might pl.. at 2004/02/16 22:37

제목 : 제 글에 트래픽을 보낼 줄이야...
이글루스에서 More & Less 사용하기 제가 할일이 있어서 간단하게 줄입니다. 자세한 내용보기자세한 내용감추기여기엔 좀더 상세한 설명이 들어가면 좋겠죠? 이미지도 물론 좋겠구요 ^^; 업로드한 이미지를 이곳에 넣을수도 있구요 자세한 내용보기자세한 내용감추기여기엔 좀더 상세한 설명이 들어가면 좋겠죠? 이미지도 물론 좋겠구요 ^^; 업로드한 이미지를 이곳에 넣을수도 있구요 아이디가 동일해서 그럽니다. <div id='xxx'> 부분에 있는 모든 아이디를 유니크한, 곧 유일한 아이디......more

Tracked from Trash Talk B.. at 2004/02/22 16:32

제목 : More & less 기능 tip 메모
이글루스에서 More & Less 사용하기 이글루 자체 more기능은 다시 닫는(less)기능이 없어서 마음에 안 들었으므로 패스. 그리고 어떤 분(...잊어먹었다)의 홈에서 공개된 내용은 굉장히 간편함에도 불구하고 script지식이 없는 나로서는 전혀 적용불가.-_-; (자꾸 에러가 뜨는데.. 후에 자세한 내용이 올라오면 좋으련만;) 그래서 ymir님 이글루에 적용된 기능을 보고 질문했더니 jinny님 이글루의 내용이었다. 사실 jinny님의 팁도 알고는 있었는데 클릭할때 좀 반응이 느린 것 같아서 제외하......more

Tracked from about:blank at 2004/03/25 15:17

제목 : 이글루 More/Less 기능 편하게 쓰기..
참고 이글루에서 More기능을 제공하기는 하지만, 페이지가 네비게이트 되고 다시 접는 기능도 없는 까닭에 약간 불편하다. 그래서 많은 사람들이 약간의 트릭을 이용하여 별도의 More/Less을 만들어 쓰고 있는 듯 하다. 오늘 이 기능이 갑자기 아쉬워서 찾아보았다. 그런데, 사용할 때마다 적어야 할 내용이 너무 길고 복잡하다. 그래서 번거롭다. 번거로운 건 질색이라 약간의 꽁수를 더 써서 함수를 정의해서 사용하는 방향으로 개량해 보았다. 우선 'show_my_more' 와 'hide_my_more'같은 함수를 정의......more

Tracked from 향기나는 웃음 at 2005/07/05 23:22

제목 : more/less 기능 알아두기
이글루스에서 More & Less 사용하기 jiinny님 블로그에서 트랙백했다. 알아두면 유용할꺼 같으니까!! 이글루의 more/less 기능이 조금 많이 불편한 점이 있었는데, 이걸로 해결된거 같다. 'ㅡ'b...more

Tracked from † Dive into .. at 2005/10/14 03:31

제목 : - More/Less (2)
이글루스에서 More & Less 사용하기...more

Tracked from 흔들리는 다락방 at 2005/11/28 11:47

제목 : 열심히 찾아헤매던 기능 ^-^
이글루스에서 More & Less 사용하기 <div id='test_click1'><a href="#none" onclick=document.all['test_more'].style.display='block';document.all['test_click1'].style.display='none';document......more

Tracked from plan B at 2006/02/01 00:59

제목 : 접었다 펼치자!!
이글루스에서 More & Less 사용하기 이제부터 나도 접었다 펼치자!! 접었다 펼칠 내용이나 사진이 없다는게 문제이긴 하지만 -_-...more

Tracked from JS's Blog at 2007/01/23 11:40

제목 : [태그] 이글루스에서 more 태그 사용법~~
좋아~~ 아주 좋아~~ ㅎㅎㅎ 이글루스에서 More & Less 사용하기...more

Linked at 뽐뿌 inside : 저작권에.. at 2007/10/16 22:40

... 입니다'를 확인해 주시기 바랍니다. 이 내용을 지켜주신다면 누구나 본 이글루(블로그)의 내용을 전제, 수정 및 게시할 수 있습니다. (more/less 태그를 만들어 주신 jinny님과 좋은 방법을 알려주신 룬엘님께감사드립니다) 2. 개인적인 질문이나 궁금증, 공식적인 요청 등의 내용은 메일 및 Skype로 주시기 바랍니다. 다음메일은 ... more

Commented by eouia at 2004/01/04 20:23

그런데 이 팁을 쓰면 IE가 아닌 브라우저에서는 제대로 안보이는 단점이. 흑흑.

Commented by jiinny at 2004/01/04 20:31

eouia // 네 그렇죠..ㅠ,.ㅠ 다른 브라우저에서도 되게 하려면 자바스크립트가 지원 되어야 합니다. 저도 imac을 사용하기 땜에 그냥 이게 꽁수로 된다 정도지 적극 사용할 생각은 없습니다.

Commented by 눈love at 2004/01/04 21:05

흠..숨기기까지..훗훗 :)
근데 너무 길어지는게 아닐까요? ^^; 제 방식도 어려워하시는분이 많더라구요..흐흐;
어서빨리 이런 꽁수말고 정식으로 지원되었으면 좋겠습니다. ^^;

Commented by jiinny at 2004/01/04 21:08

눈love // 네.. 좀 길죠... 자바스크립트만 지원되도 자유도가 좀 커질텐데 말이죠..

Commented by zodiac47 at 2004/01/05 00:51

흐... 왠지 모어기능이 있어야 할거 같다는 압박이...^^;;

Commented by jiinny at 2004/01/05 01:56

조디악 // 모어 기능도 중요하지만 우선은 archive나 개개의 글 등의 스킨이나 표현방법을 바꿀 수 있게 하는 것도 중요하다고 봅니다. 예를 들어서, 윗글의 날짜, 카테고리, 관련글, 덧글 등이 나와 있는 부분들을 분리시킬 수 있다면 괜찮겠죠. 좀더 세분화된 이글루 태그가 제공된다면, 차별화가 되겠죠.

Commented by 샐리 at 2004/02/14 11:17

이게 한 페이지에서 한개의 포스트에 적용하면 잘 되는데,

한 페이지에서 여러 개의 포스트에 적용하면 클릭해도 화면이 꼼짝을 안 해요. 그러니까, '자세한 내용 보기'를 아무리 클릭해도 그냥 '자세한 내용 보기'만 덜렁 보이는 상태. 아무리 해도 숨은 내용이 안 보이는데요... 저만 그런가요?

Commented by ymir at 2004/02/15 23:36

샐리님의 리플을 보고 시험해본 결과...저도 그렇군요.; 한 페이지에 두 개 이상이 들어갈 경우 클릭을 해도 양쪽 모두 반응이 없습니다. 하지만 굉장히 멋진!! 기능인데요. 이글루 자체의 more보다 훨씬 낫습니다.

Commented by 수짱 at 2004/09/16 00:53

덕분에 잘 쓰고 있습니다 정말 감사드려요

Commented by Gːyak at 2005/10/14 03:31

잘 쓰겠습니다, 감사해요..:D

Commented by piri at 2005/12/10 11:16

아아- 태그를 전혀 모르는 저로서는- 도무지 아무리 봐도 모르겠네요.

Commented by 새벽 at 2006/02/10 23:51

감사합니다~ 잘 쓸께요 ㅎㅎ

Commented by hislove at 2007/02/20 19:55

more 와 less 에 해당되는 부분에 띄어쓰기를 그냥 넣으면 다시 접히지 않는 에러가 날 경우가 있답니다.

그럴 땐 띄어쓰기 대신에   를 넣어주면 확실히 작동할 겁니다.