JGU Content Layout – Tabs

Structure the content of your page as Tabs

You need the Plugin JGU Content Layout!

Contents

  1. Live-Example
  2. Source Code Example
  3. Using Tabs
    1. Shortcode jgu_content_layout
    2. Shortcode jgu_content_layout_item

Live-Example

Try our demo: → JGU Content Layout - Tabs

Source Code Example

Copy and paste into your page:


Text Block #1
The content


Text Block #2
The content


Text Block #3
The content


Text Block #4

Using Tabs

Shortcode jgu_content_layout

The Shortcode [jgu_content_layout] spans the whole content that should appear in the Tabs. After the last content there has to be the Shortcode  [/jgu_content_layout] You will get Tabs with the parameter display="tab".

Example: [jgu_content_layout display="tab"]...[/jgu_content_layout]

Replace the dots in the example above with the following Shortcode [jgu_content_layout_item].

Shortcode jgu_content_layout_item

The Shortcode [jgu_content_layout_item] spans the content of each Tab and has to be ended with [/jgu_content_layout_item] You may format the text.

The Shortcode is specified via the parameters:

  1. Parameter: title
    Function: Tab Title
    Example: [jgu_content_layout_item title="Test"]Example-Text[/jgu_content_layout_item]
  2. Parameter: status
    Function: define, which tab should be open on opening the web page.
    Values: open. If the parameter is not set, the Tab is closed
    Attention ❗: There may be only one Tab with the value open
    Example: [jgu_content_layout_item status="open"]Example-Text[/jgu_content_layout_item]