Collapsible

The collapsible component is designed to allow users to hide or expand content sections on a webpage. It provides a convenient way to organize and present information in a condensed format, improving readability and user experience.

Usage

To use the collapsible component, follow these steps:

1. HTML Structure:

   <div collapse="toggle"> 
       <div class="collapse-h">Header Text</div>
       <div class="collapse-d">
           Content Text
       </div>
   </div>

2. Attributes:
   - collapse="toggle": Defines the collapsible behavior.
   - .collapse-h: Class for the header of the collapsible section.
   - .collapse-d: Class for the content of the collapsible section.
   - cl-expand: default expand.

3. Optional Features:
   - "Show More" Button: You can include a "show more" button to expand the content section.

     <div collapse="expand" c-expand-label="Show more" c-less-label="Less">
         <!-- Content -->
     </div>

Styling

The component can be customized using CSS to match your website's design. Here's an example of styling for the "show more" button:

.less {
    overflow: hidden;
    height: 150px; /* Set the initial height */
}

Example

<!-- Example with "show more" button -->
<div collapse="expand" c-expand-label="Show more" c-less-label="Less">
    <div class="collapse-d less">
        <!-- Content -->
    </div>
</div>

default expand

<div collapse="expand" cl-expand c-expand-label="Show more" c-less-label="Less">
    <div class="collapse-d less">
        <!-- Content -->
    </div>
</div>

 <div  cl-expand  collapse="toggle"> 
         <div  class="collapse-h">What are the top products in the  [category] market right now?</div>
              <div class="collapse-d">
             The [category] market is filled with a wide range of products, but a few stand out as the top choices among consumers
              </div>
         </div>

Events

// Get the collapsible component element
var collapsible = document.querySelector('[collapse]');

// Add event listener for the "expand" event
collapsible.addEventListener("expand", function() {
    // Your expand event handler logic here
    console.log("Content expanded");
});

// Add event listener for the "less" event
collapsible.addEventListener("less", function() {
    // Your less event handler logic here
    console.log("Content collapsed");
});

Customizing Collapse

The Collapse component provides a way to hide or reveal content within a container. Below are the variables you can customize to match your desired theme:

Collapse Container

Variable	Description
--background-color	Background color of the collapse container.

Collapse Toggle

Variable	Description
--border-style	Style, width, and color of the toggle border.
--border-width	Width of the toggle border.
--border-color	Color of the toggle border.

Collapse Header

Variable	Description
--padding	Padding around the collapse header.
--padding-cnt	Additional padding around the collapse header.

Collapse Icon

Variable	Description
--color-secondary	Color of the collapse icon.
--transition-time	Duration of the icon transformation transition.

Collapse Content

Variable	Description
--color-surface-container	Background color of the collapse content.
--transition-time	Duration of the content transition.

Collapse Expand

Variable	Description
--transition-time	Duration of the expand animation.

Example CSS Customization

[collapse] {
    --background-color: #f0f0f0; /* Set background color for collapse container */
}

[collapse="toggle"] {
    --border-style: solid; /* Set border style for toggle */
    --border-width: 1px; /* Set border width for toggle */
    --border-color: #cccccc; /* Set border color for toggle */
}

[collapse] .collapse-h {
    --padding: 10px; /* Set padding for collapse header */
    --padding-cnt: 20px; /* Set additional padding for collapse header */
}

[collapse] .collapse-h .icon {
    --color-secondary: #333333; /* Set color for collapse icon */
    --transition-time: 0.3s; /* Set transition time for icon transformation */
}

[collapse] .collapse-d {
    --color-surface-container: #ffffff; /* Set background color for collapse content */
    --transition-time: 0.3s; /* Set transition time for content transition */
}

[collapse="expand"] {
    --transition-time: 2s; /* Set transition time for expand animation */
}