[Javascript]메뉴클릭시 하위내용보이기

좁은공간에 여러가지 최근게시물을 멀티탭기능으로 보여주는 방식이나 FAQ 메뉴등에서 질문을 클릭시 내용이 보이게 하는.. 그런곳에 많이 사용됩니다.

 

 

<script type="text/javascript">
var old_menu = '';
function menuclick( submenu )
{
        if( old_menu != submenu ) {
                if( old_menu != '' ) {
                        old_menu.style.display = 'none';
                } else {
                        submenu0.style.display = 'none';
                }
                submenu.style.display = 'block';
                old_menu = submenu;
        } else {
                submenu.style.display = 'block';
                old_menu = submenu;
        }
}
</script>

그후에 클릭했을시 보여질 메뉴텍스트나 이미지에 아래소스 삽입

 

style="cursor:pointer;" onClick="menuclick(submenu3);"

 

 

마지막으로 클릭시 보여질 곳에 아래소스 삽입

 

<span id="submenu0" style="display:block;">맨처음보일내용</span>

 

그밑으로 이름만 바꾸면서 계속 추가해줍니다.

 

<span id="submenu1" style="display:none;">submenu1을 클릭해서 보일내용</span>

만약 마우스 클릭시가 아닌 마우스 오버했을때로 바꾸실려면 onMouseOver 로 바꾸시면 됩니다.