Collapsible Panels

The script below adds functionality to allow users to expand and collapse panels. Note that this feature can hide important information, such as form validations, which may confuse users. Please consider possible side effects and use it carefully.

  1. Add an image called caret-down-fill.svg like this one to the embedded files in your Application Explorer

  2. Add the CSS below into the stylesheet (if you don’t have a stylesheet in your Application Explorer, you need to enable it in the Application Properties)

.panel-container {
  position:relative;
}
.collapsible .panel {
  position:relative;
}
.noTitle .panel {
  padding-top: 30px;
}
.panel-heading {
  padding-left:25px;
}
.collapser {
  background-image:url(../Content/EmbeddedFiles/caret-down-fill.svg);
  background-size:20px 20px;
  background-repeat:no-repeat;
  background-position:left top;
  height:20px;
  width:20px;
  cursor:pointer;
  position:absolute;
  top:10px;
  left:4px;
}
.col_closed {
  transform: rotate(180deg);
  background-position:right bottom;
}
.pan_closed .panel {
  height:45px;
  overflow:hidden;
}
  1. Add the class ‘collapsible’ to all panel that should have the feature. By default the panel will be open. To show it collapsed by default, add the class ‘pan_closed’ to the panel classes as well.

  2. Add a Javascript action into the page.load event with the following script:

let panelContainer = document.querySelectorAll(".collapsible");
for (let i = 0; i < panelContainer.length; i++) {
	let collapser = document.createElement("div");
	collapser.classList.add("collapser");
    panelContainer[i].appendChild(collapser);
    if (panelContainer[i].classList.contains("pan_closed")) {
        collapser.classList.add("col_closed");
    }
    if (!panelContainer[i].querySelector(".panel-heading")) {
        panelContainer[i].classList.add("noTitle");
    }
    collapser.addEventListener("click", function (e) {
        let cCollapser = e.target;
        let cCollapsible = cCollapser.closest(".collapsible");
        if (cCollapsible.classList.contains("pan_closed")) {
            cCollapsible.classList.remove("pan_closed");
            cCollapser.classList.remove("col_closed");
        } else {
            cCollapsible.classList.add("pan_closed");
            cCollapser.classList.add("col_closed");
        }
    });
}

vsi7g9fhsC

2 Likes