Collapsible Panel

From Wiki openElement
Jump to: navigation, search
Path: Elements / Containers / Collapsible Panel

Contents

Description

The collapsible panel is effectively a group that can house content (i.e. elements) in a predefined space, and either expand (show) or collapse (hide) this content.
Visitors can choose to display or hide the content in the collapsible panel by clicking on its tab.

Example: (Panel Open)

Onglet02.png

Add a Collapsible Panel Element

Drag-and-Drop the element Collapsible Panel from the elements menu anywhere on the page.

Configuration

This element can be configured from the elements and styles menu / Properties.

Onglet03.png

Common

  • Filter by Language: Choose whether or not to display the element depending on the language the page is in.
  • Tooltip: Add a tooltip on an element.
  • Name: Give the element an easily identifiable name.
  • Resizing: Change how the element is able to be resized.
    • Auto: The element adapts to the size of its content in height and width.
    • Height Only: The element can only be resized height-wise.
    • Width Only: The element can only be resized width-wise.
    • Height and Width: Element can be resized in height and width to a fixed size of your choice.


Behavior

  • Duration to Stay Open: How long the panel should stay open once clicked, in milliseconds.
  • Closing Effect: Slowdown effect when closing the panel/tab.
  • Opening Effect: Slowdown effect when opening the panel/tab.
  • Event: Event that triggers the opening of the panel/tab.
  • Positioning: The type of positioning (absolute or relative) of elements contained within the Collapsible Panel.
  • Open: Specifies whether the panel/tab should be open (checked) or closed (unchecked) when the page loads.
  • Starting Position: Position the tab should be in in its initial state (up, down, left, right).


Design and Presets

There are numerous style presets available for this element in the Cloud Library. Presets can be accessed through the Elements and Styles Menu, under the Styles tab, in Style Presets.

To change its appearance, users must override the element's various style zones.

Dimensions par défaut:
- Height: 357px
- Width: 531px

Onglet05.png Expandable Content - Opening Direction: Up-Down
Default Value:
Background Color: #000000

Onglet06.png Tab Open - Opening Direction: Up-Down
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Height: 20px
Positioning:
- Cursor: main


Onglet07.png Tab Closed - Opening Direction: Up-Down
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Height: 20px
Positioning:
- Cursor: main

Onglet08.png Expandable Content - Opening Direction: Down-Up
Default Value:
Background Color: #000000

Onglet09.png Tab Open - Opening Direction: Down-Up
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Height: 20px
Positioning:
- Cursor: main

Onglet10.png Tab Closed - Opening Direction: Down-Up
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Height: 20px
Positioning:
- Cursor: main

Onglet11.png Expandable Content - Opening Direction: Left-Right
Default Value:
Background Color: #000000

Onglet12.png Tab Open - Opening Direction: Left-Right
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Width: 20px
Positioning:
- Cursor: main


Onglet13.png Tab Closed - Opening Direction: Left-Right
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Width: 20px
Positioning:
- Cursor: main

Onglet14.png Expandable Content - Opening Direction: Right-Left
Default Value:
Background Color: #000000

Onglet15.png Tab Open - Opening Direction: Right-Left
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Width: 20px
Positioning:
- Cursor: main



Onglet16.png Tab Closed - Opening Direction: Right-Left
Default Value:
Background:
- Image: Imagestyle001.png
- Image Position: Center
- Image Repetition: Fixed
Dimensions:
- Width: 20px
Positioning:
- Cursor: main

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox