Expand, collapse function with jquery

Question

I have 4 columns in 1 pages, each have a button to do function to collapse/expand the div and hide the others column. Click the button again will move the page to the initial state. The flow is:

| Col 1 | Col2 | Col3 | Col4 |

| Btn1 | btn2 | btn3 | btn4 |

When i click btn2 for example the page becomes:

| Col 2 | (width = 100%)

| Btn 2 |

How can i do that with jquery

The HTML code here:

<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

This is how I would do it. Adding and removing classes that hide the parts that you want and showing the parts you want. Good luck.

$(".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>