details-summary-wrapper
Reactive icon

Details Summary Wrapper

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 13 Nov (14 hours ago)
 by 
0.0
 (0 ratings)
details-summary-wrapper

Details Summary Wrapper

Documentation
1.0.0

The Details Summary Wrapper create a disclosure widget, allowing users to show or hide a section of content. They are highly valuable because they provide this functionality natively in the browser, offering excellent accessibility and requiring no JavaScript for basic function. 

Here are the primary use cases for the Details Summary Wrapper:

1. Frequently Asked Questions (FAQ) Section - This is the most common and ideal use case, Each question is placed within a summary placeholder, and the corresponding answer is placed within the main content placeholder.

2. Accordions and Toggles - They serve as a simple, native alternative to complex JavaScript-based accordion widgets.

3. Progressive Disclosure - This is the design principle of revealing information only as the user needs it to prevent information overload.

4. Technical and Debugging Information - They are useful for exposing information that is not essential for the general user experience but can be helpful when needed.



The Details Summary Wrapper is very easy to use, Below mentioned details on placeholders and input parameter's - 

Summary (Placeholder) - This defines the visible heading or caption for the disclosure widget when it's closed. This is the text the user clicks to expand the content.

Content (Placeholder) - This contains all the expandable content.

IsOpen (Input Parameter) - Specifies that the details should be visible (open) by default.

GroupName (Input Parameter) - Specifies a group name - when using the same name for several details elements, the user can open only one dialog box at the time

ExtendedClass (Input Parameter) - Add custom style classes to the Pattern. You define your custom style classes in your application using CSS.