Drupak Drupal Career Development Program

This video, part of a JavaScript training series, provides a practical tutorial on building two common web UI elements: Tabs and Accordions.

Creating Tabs

• Markup: The presenter structures tabs using a wrapper, buttons with data-tab-id attributes, and corresponding div panels.
• Logic: Using JavaScript, the code selects all buttons and panels. It adds a click event listener that captures the data-tab-id. It then loops through the panels, showing the one that matches the clicked ID while setting the hidden attribute to true for others.
• Dynamic Handling: The presenter demonstrates how to programmatically hide non-active tabs upon initial page load.

Creating Accordions

• Structure: Each accordion item consists of a header and a body. The headers include a + sign using CSS ::after.
• CSS Animation: The bodies are initially hidden with max-height: 0 and overflow: hidden. The active class is used to toggle the icon to a - sign.
• JavaScript Functionality:
  • The code targets nextElementSibling (the body) and updates its max-height using the scrollHeight property for smooth content display.
  • Logic improvements: The presenter adds conditional logic to allow clicking an open header to close it, and ensuring that clicking a new header automatically closes any previously opened ones to maintain a clean UI.