Below is the code snippet for collapsible accordion made under materialize css framework. I'm trying to expand all accordion item on button click and close all the accordion on click of another button. And only one button remains visible at a time.

The js code I've written doesn't show any error on button click nor does the task I'm expecting.

I would be very thankful if someone could guide how to get this on working stage.

$('.collapsible').collapsible();

function expandAll() {
  $(".collapsible-header").addClass("active");
  $(".collapsible").collapsible({
    accordion: false
  });
  $("#expand").fadeOut();
$("#collapse").fadeIn();
}

function collapseAll() {
  $(".collapsible-header").removeClass(function() {
    return "active";
  });
    $("#expand").fadeIn();
$("#collapse").fadeOut();
  $(".collapsible").collapsible({
    accordion: true
  });
  $(".collapsible").collapsible({
    accordion: false
  });
}

.collapsible li.active i {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header i {
  position: absolute;
  right: 0px;
}
#collapse{
 display:none;
}

<script src=".1.1/jquery.min.js"></script>
<link href=".0.0/css/materialize.min.css" rel="stylesheet" />
<link href="+Icons" rel="stylesheet">
<script src=".0.0/js/materialize.min.js"></script>

<a class="waves-effect waves-light btn" onClick="expandAll();" id="expand"><i class="material-icons left">fullscreen</i>Expand All</a>
  <a class="waves-effect waves-light btn" onClick="collapseAll();" id="collapse"><i class="material-icons left">fullscreen_exit</i>Collapse All</a>
<ul class="collapsible">
  <li>
    <div class="collapsible-header">

      First
      <i class="material-icons rotate right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">Second
      <i class="material-icons rotate right">expand_more</i>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">Third
      <i class="material-icons rotate right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

Below is the code snippet for collapsible accordion made under materialize css framework. I'm trying to expand all accordion item on button click and close all the accordion on click of another button. And only one button remains visible at a time.

The js code I've written doesn't show any error on button click nor does the task I'm expecting.

I would be very thankful if someone could guide how to get this on working stage.

$('.collapsible').collapsible();

function expandAll() {
  $(".collapsible-header").addClass("active");
  $(".collapsible").collapsible({
    accordion: false
  });
  $("#expand").fadeOut();
$("#collapse").fadeIn();
}

function collapseAll() {
  $(".collapsible-header").removeClass(function() {
    return "active";
  });
    $("#expand").fadeIn();
$("#collapse").fadeOut();
  $(".collapsible").collapsible({
    accordion: true
  });
  $(".collapsible").collapsible({
    accordion: false
  });
}

.collapsible li.active i {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header i {
  position: absolute;
  right: 0px;
}
#collapse{
 display:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<a class="waves-effect waves-light btn" onClick="expandAll();" id="expand"><i class="material-icons left">fullscreen</i>Expand All</a>
  <a class="waves-effect waves-light btn" onClick="collapseAll();" id="collapse"><i class="material-icons left">fullscreen_exit</i>Collapse All</a>
<ul class="collapsible">
  <li>
    <div class="collapsible-header">

      First
      <i class="material-icons rotate right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">Second
      <i class="material-icons rotate right">expand_more</i>
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">Third
      <i class="material-icons rotate right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

• javascript
• jquery
• html
• css

2 Answers 2

You need to call the instance of the Collapsible in order to call .open() or .close() on it.

You can do it like this with Materialize's Collapsible.getInstance function. Add these lines to your closeAll() and openAll() functions:

var instance = M.Collapsible.getInstance($('.collapsible'));
instance.open()

var instance = M.Collapsible.getInstance($('.collapsible')); 
instance.close()}

You also didn't need to set the accordion to true or false, you can remove those lines:

$(".collapsible").collapsible({ accordion: false });

CodeSandbox working demo of your code with working expandAll and closeAll!: https://codesandbox.io/s/mm9w7wl0l9

There is 2 issues using @Jim answer.

As he said you need the instance of the Collapsible to close or open. The fact is that you don't want to open or close the Collapsible himself but his children.

Let me explain.

From the Materialize documentation:

You can programmatically open and close collapsibles through these methods. The second > parameter is the 0-based index of the collapsible you want to open.

.open();

Open collapsible section.

Arguments

Integer: Nth section to open.

instance.open(3);

As it's said, with open() method, (and close() one as well), you have an argument for the collapsible section, who is in fact the child you want to open or close.

Not specifying an argument will have the effect of adding or removing the 'active' class (which is the class for materialize to know if a section is open), only for the first child of the Collapsible instance.

So in the example shown by @Jim, the first issue is that expanding all the collapsibles with the button will add 'active' class only for the first section. So collapsing this section by hand will have the effect of canceling the trigger purpose of the collapse button :

Of course same thing will happen if you collapse all the sections and open just the first one

This is due to the way Materialize open and close the collapsibles as you can see on the materialize.js file :

function open(index) {
  var _this8 = this;
  var $collapsibleLi = this.$el.children('li').eq(index); // <-- Materialize get all the children of the collapsible element
  if ($collapsibleLi.length && !$collapsibleLi[0].classList.contains('active')) {
    ...
    $collapsibleLi[0].classList.add('active'); // <-- Here the 'active' class is only added to the first element
    ...
  }
}

function close(index) {
  var $collapsibleLi = this.$el.children('li').eq(index); // <-- Get children
  if ($collapsibleLi.length && $collapsibleLi[0].classList.contains('active')) {
    ...
    $collapsibleLi[0].classList.remove('active'); // <-- Same here
    ...
  }
}

The second issue is when you expand all your sections, because only the first one have the 'active' class, clicking on another section will not close it but reopen it (by adding 'active' class) :

So finally, if you want to avoid this 2 issues, you need to open and close every section of your Collapsible instance.

Doing this way will ensure a clear opening and closing of your collapsibles

var instance = M.Collapsible.getInstance($('.collapsible'));
const children = instance.$el[0].children.length
for (var i = 0; i < children; i++) {
  instance.open(i) // or instance.close(i)
}

Don't forget to set your collapsible accordion option to false.

$(document).ready(function () {
  $(".collapsible").collapsible({ accordion: false });
});

Here is the forked project of @Jim with a non-issue solution.