Topincs Reference
PHPJavaScriptHTML ComponentsIndex
0Sign in
HTML custom component A-Z Ongoing

div-fold

Description

A title connected to content. The component has two states. When folded, only the title is visible. Upon click on the title the content unfolds down. Another click on the title folds it back up.

HTML structure

[%<div-fold> <h2></h2> <div></div> </div-fold>%] [%<div-fold folded> <h2></h2> <div></div> </div-fold>%]

Comments

The %div-fold% element needs two children. The first one, the _title_, will *always be visible* and is rendered with a triangle before. The second child, the _content_, *toggles visibility* when the first one is clicked. When the title contains children, which should ignore the click, e.g. input elements, they need to have an attribute %df-ignore%.

Attributes

Coding name folded

Preserves state when id attribute present on element

1

We are sorry

This page cannot be displayed in your browser. Use Firefox, Opera, Safari, or Chrome instead.

Saving …

   

Before we continue …

No internet connection

Refreshed lab_unknown

Edit