jqueryで単純なスプリッタを試してみましたが、動作していません

Question

私は2 div 1 divクラスを持っていて、別のdivクラス名は "more-section-wrapper"と呼ばれ、ヘッダクラスは "more-section-wrapper" "より多くのセクションヘッダー"。

$(".more-sections-wrapper").css("width","20px"); 
        $(".sections").css("width","810px"); 

以下のように、その後、私はより多くのセクションラッパーと新しいクラス名あまりセクション-ラッパーとIの追加を削除しようとして、onclickをもっとセクションヘッダに私は両方のdivの幅を調整しようとしていますセクションオーバーラッパーの幅調整onclickを超えていました。

私はスプリッターをしようとしますが、click .more-section-headerクラスの幅を調整しましたが、less-section-wrapperクラスをクリックしてもうまくいきません。

以下のコードを確認してください。

  ----------------------------------------------- 
      |      |      | 
      |      |      | 
      |      |      | 
      |      |      | 
      |      |      | 
      ------------------------------------------------ 

以下のように

$(".more-section-header").click(function() { 
    $(".more-sections-wrapper").css("width","20px"); 
    $(".sections").css("width","810px"); 
    $(".more-section-header").removeClass('more-section-header').addClass('less-section-header'); 
    }).find(".less-section-header").click(function() { 
     $(".less-sections-wrapper").css("width","347px"); 
     $(".sections").css("width","495px"); 
     $(".less-section-header").removeClass('less-section-header').addClass('more-section-header'); 
    }); 

HTML構造の提案jqueryの

Answer 1

で簡単なスプリッタを実装するためのソリューションは、あなたがachiveしようとしているものをthisですしてください？

Hereはアニメーションバージョンです。