자체 해결하여 팁을 공유합니다.

 

1. _tap_top.html 파일에 탭을 클릭하면 해당 게시판 화면으로 이동하는 것을 막았습니다.

<a href="{$tab->url}" onmouseover="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$tab->title}</a>
->
<a href="javascript:void(0);" onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$tab->title}</a>
 

2. 더보기 버튼 태그를 추가해줍니다.

<li<!--@if($i==0)--> class="active"<!--@end-->>   

    <a href="javascript:void(0);" onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$tab->title}</a>

    </li>

    <span<!--@if($i==0)--> class="open"<!--@end-->> <a href="{$tab->url}"><img src="/img/btn_listMore.png" /></a></span>

3. 더보기 버튼에 해당하는 css를 넣어줍니다.

.widgetTabA span.open{display: block;}

4. content_widget.js 파일에 더보기 버튼이 탭을 클릭할 때마다 유동적으로 변경되도록 해줍니다.
 

function content_widget_tab_show(tab,list,i){

    //탭 이동

tab.parents('ul.widgetTab').children('li.active').removeClass('active');

    tab.parent('li').addClass('active');

    //더보기 버튼 연동하여 보이기

    tab.parents('ul.widgetTab').children('span.open').removeClass('open');

    tab.parent('li.active').next('span').addClass('open');

    jQuery('>dd',list).each(function(j){

            if(j==i){

               $(this).addClass('open');

               $(this).show();             

            }else{

               $(this).removeClass('open');

               $(this).hide();

            }

         });

}

이렇게 해주면 됩니다~! :)