jqueryで展開、折りたたみ関数

Question

私は4つの列を1ページに持っていますが、それぞれはdivを折りたたんだ/展開して他の列を非表示にするボタンを持っています。 ボタンをもう一度クリックすると、ページが初期状態に移動します。フローは次のとおりです。

| | Col2 | Col3 | Col4 |

| Btn1 | btn2 | btn3 | btn4 |私は、例えばBTN2クリックすると

ページには、次のようになります。

| | （幅= 100％）

| Btn 2 |

<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn1</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 
<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn2</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 
<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn3</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 
<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn4</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 

Answer 1

これは私がそれを行うだろうかです：

は、どのように私はjQueryの

ここではHTMLコードでそれを行うことができます。必要な部分を隠すクラスの追加と削除、および必要な部分の表示がんばろう。

$(".btn").on("click", function(){ 
 
    
 
    if($(this).closest(".block-panel").hasClass("showSingle")){ 
 
    
 
    $(".block-panel").removeClass("hidden"); 
 
    $(".block-panel").removeClass("showSingle"); 
 
    $(".block-panel").addClass("showAll"); 
 
    
 
    } else { 
 
    
 
    $(".block-panel").removeClass("showAll"); 
 
    $(".block-panel").removeClass("showSingle"); 
 
    $(".block-panel").addClass("hidden"); 
 
    
 
    $(this).closest(".block-panel").addClass("showSingle"); 
 
    } 
 
    
 
});

.btn { 
 
    background: #CCC; 
 
} 
 

 
.btn:hover { 
 
    cursor: pointer; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.showSingle { 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    outline: 1px dashed #CCC; 
 
} 
 

 
.showAll { 
 
    display: block; 
 
    float: left; 
 
    width: 25%; 
 
    outline: 1px dashed #CCC; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn1</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 1 
 
    </div> 
 
</div> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn2</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 2 
 
    </div> 
 
</div> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn3</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 3 
 
    </div> 
 
</div> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn4</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 4 
 
    </div> 
 
</div>