Jquery 메뉴 문의 드립니다.

우선 예시를 들어보면

카테고리1

카테고리2 

두가지의 카테고리가 있습니다.

카테고리 1을 누르면 board라는 새로운 영역이 오른쪽에 펼쳐지며, 

각 세부 메뉴들을 나열해 두었구요.

카테고리 1을 다시 누르면 board라는 새로운 영역이 닫히게 됩니다.

카테고리 2마찬가지로, 누르면 board2가 열리고 다시 카테고리 2를 누르면

닫히는 더보기 메뉴의 형태 인데요.

여기서 Jquery는 이런식으로 짜였는데.. 

마우스 오버 형태처럼 카테고리 1을 열고, 2를 누르면 1이 자동으로 닫히는 

그런 방식을 구현하고 싶습니다.

따로 한번 더 누르지 않으면 겹쳐서 보여버리더라구요..

공부 목적으로 혼자 해보고는 있는데, 너무 어렵네요 ㅠ 도움이 절실하게 필요합니다.

jQuery(document).ready(function(){
  jQuery('.more').click(function(){
    if(jQuery('.more').hasClass('more')){
       jQuery('.more').addClass('close').removeClass('more');
       jQuery('.board').css('visibility', 'visible');
    }else if(jQuery('.close').hasClass('close')){
       jQuery('.close').addClass('more').removeClass('close');  
       jQuery('.board').css('visibility', 'hidden');
    }
  });
});

jQuery(document).ready(function(){
  jQuery('.more2').click(function(){
    if(jQuery('.more2').hasClass('more2')){
       jQuery('.more2').addClass('close2').removeClass('more2');
       jQuery('.board2').css('visibility', 'visible');
    }else if(jQuery('.close2').hasClass('close2')){
       jQuery('.close2').addClass('more2').removeClass('close2');  
       jQuery('.board2').css('visibility', 'hidden');
    }
  });
});