여러개의 jquery accordion 과 탭을 동시에 사용시 아코디언크기가 작게 나오는 경우 해결방법

제이쿼리를 이용해서 탭메뉴를 만들고,

 

탭안에 아코디언으로 여러개의 컨텐츠를 뿌려줄때...

 

첫번째 페이지는 잘 나왔다. 문제는 두번째 탭에 있는 아코디언..세번째..... 첫번째 탭의 아코디언을 제외하고는 최소크기의 스크롤만 나와버리는 시츄에이션....

 

한페이지에 탭과 아코디언을 여러개 사용하는 경우 아코디언이 제대로 펼쳐지지 못하고, 가장 작은 사이즈의 스크롤로 접혀있는 경우에 해결법이다.

 

<script>
$(function() {

 

 //탭메뉴
 $( "#info_tabs" ).tabs();

 

 //탭베뉴 속 아코디언메뉴 : 사이트소개
 $( "#accordion_elaor" ).accordion({      collapsible: true    });

 //탭베뉴 속 아코디언메뉴 : 회사소개
 $( "#accordion_ja" ).accordion({      collapsible: true   });

 //탭베뉴 속 아코디언메뉴 : 서비스소개
 $( "#accordion_service" ).accordion({      collapsible: true   });});

</script>

 

보통 만들다보면 탭을 먼저 만들어놓으므로..이렇게 스크립트를 짜놓는데..

 

이 순서가 문제였다...탭 다음 여러개의 아코디언을 해줄것이 아니라...

 

아코디언을 먼저 실행후 탭을 했어야 했다.. 이유는 스타일이 재정의 되면서 문제가 됐기 때문이라는...

(http://forum.jquery.com/topic/multiple-jquery-accordions-on-one-page)

 

어쨌든 해결은 이렇게!

 

<script>
$(function() {

 //탭베뉴 속 아코디언메뉴 : 사이트소개
 $( "#accordion_elaor" ).accordion({      collapsible: true    });

 //탭베뉴 속 아코디언메뉴 : 회사소개
 $( "#accordion_ja" ).accordion({      collapsible: true   });

 //탭베뉴 속 아코디언메뉴 : 서비스소개
 $( "#accordion_service" ).accordion({      collapsible: true   });

 //탭메뉴
 $( "#info_tabs" ).tabs();

});
</script>

 

순서만 바꿔주면 된다!! 어이없음..ㄷ ㄷ ㄷ