Web Components

An Evaluation to determine a developers aptitude to create web components.

by Eric Miller

HTML

<!--// 
Objective:
Create a collapsible accordion component that allows users to expand and collapse sections of content.

Requirements:
1. The accordion should be styled with basic CSS to make it visually appealing.

2. When a section is clicked, it should expand to reveal its content. Clicking again should collapse the section.

3. Only one section should be open at a time (i.e., opening a new section should close any previously open section).

4. Use semantic HTML (e.g., <div>, <button>, <section>, etc.) to structure your component.
Write clean, modular, and maintainable code.

Evaluation Criteria:
- Correct implementation of the accordion behavior.
- Clean and organized code structure.
- Proper use of vanilla JavaScript (no external libraries).
- Styling that adheres to best practices.
//-->
<div class="accordion">
   <div class="section">
     <button class="section-header">Section 1</button>
     <div class="content">
       Content for Section 1
     </div>
   </div>
   <!-- Add more sections as needed -->
 </div>

CSS

.accordion {
   /* Your styling for the entire accordion container */
 }

 .section {
   /* Styling for each section (header) */
 }

 .content {
   /* Styling for the content within each section */
 }