jQuery - 세로로 정렬 된 열 슬라이딩

Question

두 개의 열이 있는데 둘 다 왼쪽으로 떠 있습니다.

왼쪽 열에는 오른쪽 열을 숨기는 '트리거'가 있는데 오른쪽 열이 숨겨져 있으면 왼쪽 열이 100 % 확장됩니다. 지금은 오른쪽 열을 다시 표시 할 수 있지만 문제는 오른쪽 열이 왼쪽 열 (물론 왼쪽 열의 너비가 100 %) 아래에 있고 처음에 시작한 것과 같이 옆에 나타나지 않는 것이 문제입니다.

저는 jQuery/JavaScript 프로그래머가 아니지만 jQuery 코드를 잘 이해하고 있다고 생각합니다. 지금까지이

<div id="wrapper"> 
    <div id="left-col"> 
    <div id="trigger"><a href="#">Toggle</a></div> 
    <p>...</p> 
    </div> 
    <div id="right-col">Right Column</div> 
    <br class="clear"> 
</div> 

이것은 jQuery를 다음과 같습니다 :

$(function() { 
    $("#left-col").addClass("wide80"); 
    $("#trigger a").click(function(){ 
    $("#right-col").animate({width:'toggle'},350); 
    $("#left-col").animate({width:'100%'},350); return false 
    }); 
}); 

어떤 도움을 당신이 날 주시면 감사하겠습니다 제공 할 수 있습니다

여기 내 HTML입니다.

감사합니다.

Answer 1

이 작업을 시도 할 수 -이 라인을 따라 뭔가가 케리에 감사를

$(function() { 
    $("#left-col").addClass("wide80"); 
    $("#trigger a").click(function(){ 
     var leftCol = $("#left-col"); 

     if(leftCol.data('expanded')) { 
      leftCol.animate({width:'50%'},350); 
      leftCol.data('expanded', false); 
     } else { 
      leftCol.animate({width:'100%'},350); 
      leftCol.data('expanded', true); 
     } 

     $("#right-col").animate({width:'toggle'},350); 

     return false; 
    }); 
}); 

Answer 2

최종 작업 코드를 작동합니다 :

$(function() { 
    $("#left-col").addClass("wide"); 
    $("#trigger a").click(function(){ 
    var leftCol = $("#left-col"); 

    if(leftCol.data('expanded')) { 
     leftCol.animate({width:'60%'},350); 
     leftCol.data('expanded', false); 
     $("#right-col").toggle(350); 
    } else { 
     leftCol.animate({width:'100%'},350); 
     leftCol.data('expanded', true); 
     $("#right-col").hide(); 
    } 
    return false; 
    }); 
});