• Whizzystack Solutions

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!

20 views

Recent Posts

See All
 You can unsubscribe in one click, and I will never share your email address.

About Whizzystack

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS

We are User Experience Consultant, Conversion Rate Optimization Specialist and expert in digital transformation. We help savvy marketers, product owners and UX advocates make the case that a useable, accessible and people-first experience is the best path to business success. All the while pursuing his not-so-hidden agenda. We also build & support your own talented, trusted, full-time development team hosted out of Whizzystack’s headquarters in India. We also deliver world class product and software development services Read more

What We Do

Software Development

Web Application Development

Mobile Application Development Web Portal Development

Ecommerce Development

Custom Software Development

Web Presence

UI/UX Development

Digital Marketing

Social Media Management

Search Engine Optimization

Online Reputation Management

Web Experience

UI/UX Prototyping

System Designing

Service Designing 

System Integration

Performance Optimization

Our Developers

Contact Whizzystack

USA :     +1(877)3685420

India:    +91(95)60641297

              +91(120)4287309

Pemberton Brown Mills Road,

Brown Mills, New Jersey, USA, 08015

Bouleward Walk, Habitapur, Noida, Uttar Pradesh, India, 20109