Collapsible HTML (CSS + JQ) - icon bug and "close other"

Question

I'm using this Collapsible code in my website: https://www.w3schools.com/howto/howto_js_collapsible.asp (with the animated and icon code below).

I have noticed that when the collapsible button has a long text, the icon goes to the second line. Any idea how to fix that (so it will display on the first line)?

One more thing... Do you have any idea how can I add "close others" to that collapsible (so when I click on a button, the previous button closes).

Thanks a lot!

You can use position:absolute to the specific icon, so that the icon in not going to the next line... Instead of Collapse use Accordion — Ravi Delixan, Apr 25 '18 at 08:12
Here is how to close:https://stackoverflow.com/questions/40001178/why-doesnt-this-bootstrap-collapse-close-others-with-one-section-open — לבני מלכה, Apr 25 '18 at 08:16

Giacomo Penuti · Accepted Answer · 2018-04-25T22:10:09.643

According to your request here is a fiddle i created to

Fix "icon goes to the second line"
Add accordion feature (when a collpsible is open, others in the same group are hidden).

Please check comments in snippet for further examplanation:

initCollapseGroup(".cgroup");

//use this to init an accordion
function initCollapseGroup(groupselector){
  var coll = document.querySelectorAll(groupselector + " .collapsible");
  //console.log(coll);
  var i;

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

// hides all .collapsible content inside group matched by groupselector variable
function closeCollapseGroup(groupselector){
  var coll = document.querySelectorAll(groupselector + " .collapsible");
  //console.log(coll);
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].classList.remove("active");
      var content = coll[i].nextElementSibling;
      if (content.style.maxHeight) {
         content.style.maxHeight = null;
      }
  }
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  overflow: hidden;
  background-color: #f1f1f1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/*style for label element, width gets dinamically calculated to dont 
overflow icon area, so that icon can't go in newline */
.collapsible .label {
    width: calc(100% - 25px);
    display: inline-block;
}

<div class="cgroup">
<button class="collapsible"><span class="label">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Text Open Collapsible</span></button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>
<button class="collapsible"><span class="label">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Text Open Collapsible</span></button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>
<button class="collapsible"><span class="label">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Text Open Collapsible</span></button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>
</div>

Bonus

You can also achive that using bootstrap library (i wouldn't reinvent the whell if not for a good reason that, in that case, maybe performance and avoiding libraries usage for small things). Here are docs: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

Hey! It works great. Only the animation stopped working - can you please add it? Thanks again!!! — MorBek, Apr 25 '18 at 12:32
@MorBek Fiddle edited, animation added. Now the show/hide behaviour relies on css maxheight property instead of display property. Of course you can tweak transition editing .content class css. — Giacomo Penuti, Apr 25 '18 at 22:15

Collapsible HTML (CSS + JQ) - icon bug and "close other"

1 Answers1