MAKE YOUR OWN EXPANDING AND CONTRACTING CONTENT PANNELS

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

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!