Hiding button after collapse is toggled using Javascript

Question

I'm trying to hide the "collapsible" button after it is being pressed.

activities.html:

<button class="collapsible"> <i class="fa fa-angle-down"></i></a></button>

Controller.js:

    var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var gallery1 = this.nextElementSibling;
    if (gallery1.style.maxHeight){
      gallery1.style.maxHeight = null;
    } else {
      gallery1.style.maxHeight = gallery1.scrollHeight + "px";
    } 
});
}

I would highly appreciate if someone could help me out of this!

Please write the code correctly, you didn't forget to add an opening ``? — Azhy, Jul 29 '18 at 11:10

Rick · Accepted Answer · 2018-07-29T11:16:03.943

To hide your button and remove the space occupied by the button on the page, use .style.display = 'none' on the button element in the event handler:

var coll = document.getElementsByClassName("collapsible");

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");    
    
    var gallery1 = this.nextElementSibling;
    
    if (gallery1.style.maxHeight) {
      gallery1.style.maxHeight = null;
    } else {
      gallery1.style.maxHeight = gallery1.scrollHeight + "px";
    }
    
    this.style.display = 'none';
  });
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="collapsible"><a><i class="fa fa-angle-down"></i></a></button>

To keep the space occupied by the button on the page and make it invisible, use .style.visibility = 'hidden':

var coll = document.getElementsByClassName("collapsible");

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");    
    
    var gallery1 = this.nextElementSibling;
    
    if (gallery1.style.maxHeight) {
      gallery1.style.maxHeight = null;
    } else {
      gallery1.style.maxHeight = gallery1.scrollHeight + "px";
    }
    
    this.style.visibility = 'hidden';
  });
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="collapsible"><a><i class="fa fa-angle-down"></i></a></button>

score 2 · Answer 2 · answered Jul 29 '18 at 11:15

2

The shortest solution to your problem is

<button class="collapsible" onclick="this.style.display = 'none';">

answered Jul 29 '18 at 11:15

Rohit.007

3,414
2
21
33

Hiding button after collapse is toggled using Javascript

2 Answers2