jquery로 펼치기, 접기 기능

Question

1 페이지에 4 개의 열이 있습니다. 각 열에는 div를 축소/확장하고 다른 열을 숨기는 버튼이 있습니다. 버튼을 다시 클릭하면 페이지가 초기 상태로 이동합니다. 흐름은 다음과 같습니다.

| 콜 1 | Col2 | Col3 | Col4 |

| Btn1 | btn2 | btn3 | btn4 | 내가 예를 들어 btn2 클릭하면

페이지가된다 ​​:

| 콜 2 | (폭 = 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>