Jquery手風琴 - 迴歸原狀

Question

我修改了我在CSS技巧上找到的手風琴菜單，但它工作正常，但是...我希望手風琴能夠在當前（擴展的）標題再次點擊。所以手風琴關閉，原來的起始寬度被識別。

我有關於codepen的例子...感謝任何人願意採取這個裂縫！我正在全力以赴找出答案。

http://codepen.io/Sektion66/pen/vAGsn

謝謝！

Answer 1

其作爲演示（http://jsfiddle.net/h3Kbu/1/show/）和（http://jsfiddle.net/h3Kbu/1/）工作code.Basically else部分是新的代碼。

if (!$el.hasClass("current")) { 

     $parentWrap = $el.parent().parent(); 
     $otherWraps = $(".info-col").not($parentWrap); 

     // remove current cell from selection of all cells 
     $allTitles = $("dt").not(this); 

     // close all info cells 
     $allCells.slideUp(); 

     // return all titles (except current one) to normal size 
     $allTitles.animate({ 
      fontSize: "14px", 
      paddingTop: 5, 
      paddingRight: 5, 
      paddingBottom: 5, 
      paddingLeft: 12 
     }); 

     // animate current title to larger size    
     $el.animate({ 
      "font-size": "20px", 
      paddingTop: 10, 
      paddingRight: 5, 
      paddingBottom: 5, 
      paddingLeft: 12 
     }).next().slideDown(); 

     // make the current column the large size 
     $parentWrap.animate({ 
      width: 425 
     }) 

     // make other columns the small size 
     $otherWraps.animate({ 
      width: 250 
     }) 

     // make sure the correct column is current 
     $allTitles.removeClass("current"); 
     $el.addClass("current"); 
    }else{ 
     $parentWrap = $el.parent().parent(); 
     $otherWraps = $(".info-col").not($parentWrap); 

     // remove current cell from selection of all cells 
     $allTitles = $("dt"); 

     // close all info cells 
     $allCells.slideUp(); 

     // return all titles (except current one) to normal size 
     $allTitles.animate({ 
      fontSize: "14px", 
      paddingTop: 5, 
      paddingRight: 5, 
      paddingBottom: 5, 
      paddingLeft: 12 
     }); 

     // animate current title to larger size    


     // make the current column the large size 
     $parentWrap.animate({ 
      width: 250 
     }) 

     // make other columns the small size 
     $otherWraps.animate({ 
      width: 250 
     }) 

     // make sure the correct column is current 
     $allTitles.removeClass("current"); 
     // $el.addClass("current"); 
    } 

Answer 2

這裏是我的裂紋吧：

http://codepen.io/anon/pen/kszyb

只是增加了一個else您if (!$el.hasClass("current"))聲明，扭轉元素到正常狀態。

也做了這些，避免動畫狀態的重複：

var currentState = { 
      "font-size": "20px", 
      paddingTop: 10, 
      paddingRight: 5, 
      paddingBottom: 5, 
      paddingLeft: 12 
     }; 

    var normalState = { 
      fontSize: "14px", 
      paddingTop: 5, 
      paddingRight: 5, 
      paddingBottom: 5, 
      paddingLeft: 12 
     };