Make Your Own Expanding And Contracting Content Panels

It is better to call expanding panel instead of calling Expanding and Contracting model.

Here is some approach of animated open and close with own benefit and trade off.

Approaches

There are three types of approach like-

• Animate/transition of the content

• Transformation is complete with the element.

• A library should use with variation.

Considerations Of Each Approach

Basic Steps

• Collapsing height of the content

• The content should be moved when the height is collapsed

• The content should be removed when Javascript fires it.

Markup Pattern

It can be look like

<div class="container">
 <button type="button" class="trigger">Show/Hide content</button>
 <div class="content">
 All the content here
 </div>
</div>

Basic Logic

• Always measure the height of the content

• Height should be calculated in CSS Custom Property.

Approach manifested code-

// Get the containing element

const container = document.querySelector(".container");

// Get conten

const content = document.querySelector(".content");

// 1. Get height of content you want to show/hide

const heightOfContent = content.getBoundingClientRect().height

// Get the trigger element

const btn = document.querySelector(".trigger"); 

// 2. Set a CSS custom property with the height of content

container.style.setProperty("--containerHeight", `${heightOfContent}px`);
 

// Once height is read and set

setTimeout(e => {
document.documentElement.classList.add("height-is-set");

// 3. Set aria hidden

 content.setAttribute("aria-hidden", "true");
}, 0); 
btn.addEventListener("click", function(e) {
 container.setAttribute("data-drawer-showing", container.getAttribute("data-drawer-showing") === "true" ? "false" : "true");

// 4. Set height to value of custom property

.content[aria-hidden="false"] {
 max-height: var(--containerHeight, 1000px);
}

// 5. Toggle aria-hidden

 content.setAttribute("aria-hidden", content.getAttribute("aria-hidden") === "true" ? "false" : "true");
})

The CSS is looked like-

.content {
 transition: max-height 0.2s;
 overflow: hidden;
}
.content[aria-hidden="true"] {
 max-height: 0;
}

Points Of Note

• Multiple drawer need to loop different size.

• Set time out is needed to before hiding the container.

• Only fire the wrap only whwn the page is ready.

All together it is looked like-

var containers;
function initDrawers() {
 // Get the containing elements
 containers = document.querySelectorAll(".container");
 setHeights();
 wireUpTriggers();
 window.addEventListener("resize", setHeights);
}
 
window.addEventListener("load", initDrawers);
 
function setHeights() {
 containers.forEach(container => {
 // Get content
 let content = container.querySelector(".content");
 content.removeAttribute("aria-hidden");
 // Height of content to show/hide
 let heightOfContent = content.getBoundingClientRect().height;
 // Set a CSS custom property with the height of content
 container.style.setProperty("--containerHeight", `${heightOfContent}px`);
 // Once height is read and set
 setTimeout(e => {
 container.classList.add("height-is-set");
 content.setAttribute("aria-hidden", "true");
 }, 0);
 });
}
 
function wireUpTriggers() {
 containers.forEach(container => {
 // Get each trigger element
 let btn = container.querySelector(".trigger");
 // Get content
 let content = container.querySelector(".content");
 btn.addEventListener("click", () => {
 btn.setAttribute("aria-expanded", btn.getAttribute("aria-expanded") === "false" ? "true" : "false");
 container.setAttribute(
 "data-drawer-showing",
 container.getAttribute("data-drawer-showing") === "true" ? "false" : "true"
 );
 content.setAttribute(
 "aria-hidden",
 content.getAttribute("aria-hidden") === "true" ? "false" : "true"
 );
 });
 });
}

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!