Template:Collapse-mobile

Headline (click to expand or collapse)

Lorem ipsum

Template documentation

This template uses TemplateStyles:

Template:Collapse-mobile/styles.css

The {{collapse-mobile|Headline=headline|Content=folding text}} template is used for placing collapse boxes around text in a context where mobile readers may need to access the content - standard collapse templates such as {{collapse top}} and {{collapse bottom}} often do not display on mobile devices, or display with errors. {{collapse-mobile}} will display by default as expanded text on mobile devices.

Usage

This template is customizable with regard to content and styling. Most customizable values will default to a basic/standard value if not defined.

Content

Its most basic usage, with only collapsed content defined, this template would be called as:

{{Collapse-mobile|Content=This is my text!}}

and display as (click to display in full):

Headline (click to expand or collapse)

This is my text!

Users can also define a Headline value, which will replace "Expand" as the above-the-fold text to display:

{{Collapse-mobile|Headline=This is my headline|Content=This is my text!}}

and display as:

This is my headline (click to expand or collapse)

This is my text!

Styling

This template also accepts optional CSS styling. The following parameters are defined for this template:

class: CSS class for the whole box. It's useful in connection with TemplateStyles.
Top ("Headline") bar:
- barBackground: a background color for the headline bar. If not defined by the user, this will default to #EFEFEF
- barFloat: defines the positioning of the bar horizontally on the page (see w:Cascading_Style_Sheets#Float_and_clear). If not defined, this will default to none, letting the positioning be determined by whatever the default is for the page where the template is called.
- barFont: defines the font of the headline text. If not defined, this will default to the page's/user's default font.
- barTextAlign: defines the positioning of the headline text within the headline bar. If not defined, this will default to left.
- barFontSize: defines the size of the headline text. Can be defined in terms of pixels (px) or ems. If not defined, this will default to 1.2em.
- barBorder: defines one or more characteristics of the border that will surround the headline bar (see W3Schools tutorial page on borders). Characteristics that are covered in this can include border line style, width, and color. If not defined, this will default to 2px solid #FFFFFF.
- barBorderBottom defines one or more of the characteristics of specifically the bottom border of the headline box (i.e. the border that separates it from the text the collapse box contains). If not defined, this will default to 1px solid #3366bb.
Bottom ("Content") box:
- boxBackground: a background color for the content box. If not defined by the user, this will default to #F7F7F7.
- boxBorder: defines one or more characteristics of the border that will surround the content box (see W3Schools tutorial page on borders). Characteristics that are covered in this can include border line style, width, and color. If not defined, this will default to 4px solid #FFFFFF.
- boxFont: defines the font of the content text. If not defined, this will default to the page's/user's default font.
- boxPadding: defines the amount of space between the inside of the box's border and the start of the text the box contains. If not defined, this will default to 10px.
- boxMarginTop: defines the margin between the bottom border of the headline bar and the top border of the content box. If not defined, this will default to 2px.
- boxBorderTop: defines one or more of the characteristics of specifically the top border of the content box (note that this overlaps the bottom border of the headline box). If not defined, this will default to inset.

Example

A very complex (and not particularly attractive) usage of {{collapse-mobile}} might then look like:

{{collapse-mobile
|Headline=This is my headline
|Content=This is my text
|barBackground=#A9D0F5
|barFloat=right
|barFont=Verdana
|barTextAlign=center
|barFontSize=1.5em
|barBorder=2px dashed #585858
|barBorderBottom=2px solid #CEE3F6
|boxBackground=#E0F2F7
|boxBorder=2px dotted #0A0A2A
|boxFont=monospace
|boxFontSize=2em
|boxPadding=25px
|boxmarginTop=5px
|boxBorderTop=none
}}

and would display as:

This is my headline (click to expand or collapse)

This is my text

Another example

A more realistic example actually used is:

{{collapse-mobile
|Headline=<h2>This is my header level 2 headline</h2>
|Content=This is my text
|barBackground=
|barFloat=
|barFont=
|barTextAlign=
|barFontSize= 1.0em
|barBorder=
|barBorderBottom= 
|boxBackground= #FaFaFa
|boxBorder=
|boxFont=
|boxFontSize= 1.0em
|boxMarginTop= 
|boxPadding=
}}

and would display as:

This is my header level 2 headline

(click to expand or collapse)

This is my text

Full blank syntax

{{collapse-mobile
|Headline=
|Content=
|barBackground=
|barFloat=
|barFont=
|barTextAlign=
|barFontSize=
|barBorder=
|barBorderBottom=
|boxBackground=
|boxBorder=
|boxFont=
|boxFontSize=
|boxMarginTop=
|boxPadding=
}}