Outright Consultoría
Outright SRL
Tel.: 011-4437-5781
info@outright.com.ar
Buenos Aires, Argentina
  • Home
  • Nosotros
  • Areas de Colaboracion
    • Comercial
    • Financiera
    • Cadena de Suministro
    • Calidad y Medio Ambiente
  • Clientes
  • Casos de Referencia
  • Columna de Opinion
  • Contacto
Search the site...
  • Home
  • Features
  • Shortcodes
  • Tabs & Toggles

Tabs & Toggles

Tabs

General Usage

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="tabs_above" height="100" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Options

Optional arguments
 - style: framed, open
 - nav: tabs_above, tabs_right, tabs_below, tabs_left, pills_above, pills_below
 - height: Optional height, ex: 300

Examples

Framed, with tabs above

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="tabs_above" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Framed, with tabs below

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="tabs_below" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Framed, with tabs left

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="tabs_left" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Framed, with tabs right

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="tabs_right" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Framed, with pills above

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="pills_above" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Framed, with pills below

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="framed" nav="pills_below" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with tabs above

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="open" nav="tabs_above" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with tabs below

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="open" nav="tabs_below" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with tabs left

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="open" nav="tabs_left" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with tabs right

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="open" nav="tabs_right" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with pills above

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="open" nav="pills_above" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Open, with pills below

  • Title #1
  • Title #2
  • Title #3

Tab 1 content…

Tab 2 content…

Tab 3 content…

[tabs style="open" nav="pills_below" height="true" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
[tab_1]Tab 1 content...[/tab_1]
[tab_2]Tab 2 content...[/tab_2]
[tab_3]Tab 3 content...[/tab_3]
[/tabs]

Toggles

One thing that may be confusing about this section is distinguishing the difference between “Toggles” and an “Accordion” — So, let’s clear that up first. A toggle essentially allows you to hide a piece of content and let the user open and close it. You can stack many of these toggles in a row for a nice way of organizing content in your page or post. Then, in addition to that you can wrap your set of toggles with the “accordion” shortcode to group them together. This means that your set of toggles will now take on the traditional accordion concept of only allowing one toggle open at any given time.

General Usage

Toggle #1

Content of toggle #1.

Toggle #2

Content of toggle #2.

Toggle #3

Content of toggle #3.

[raw]
[toggle title="Toggle #1"]Content of toggle #1.[/toggle]
[toggle title="Toggle #2"]Content of toggle #2.[/toggle]
[toggle title="Toggle #3" last]Content of toggle #3.[/toggle]
[/raw]

Note: If this is a group of toggles that aren’t wrapped in an accordion, as the above example above shows, you can use the word “last” on the last toggle to the theme can apply some margin below the last toggle to separate from any content to come after. This is optional.

Options

Required arguments
 - title: Title of the toggle

Accordion

So now that you’ve got a set of toggles, what if you want to group them together as a traditional accordion? You can do this simply wrapping your toggles in the [accordion] shortcode.

Toggle #1

Content of toggle #1.

Toggle #2

Content of toggle #2.

Toggle #3

Content of toggle #3.

[raw]
[accordion]
[toggle title="Toggle #1"]Content of toggle #1.[/toggle]
[toggle title="Toggle #2"]Content of toggle #2.[/toggle]
[toggle title="Toggle #3"]Content of toggle #3.[/toggle]
[/accordion]
[/raw]

Acerca de Outright

Outright es una empresa argentina especializada en conducción y gestión de proyectos de alta complejidad, que inicia su actividad en septiembre de 1996 a través del desarrollo de diversos proyectos de consultoría en empresas del segmento medio y alto.

Columna de Opinión

  • Columna de Opinión – En desarrollo

Contáctenos

  • 011-4437-5781
  • info@outright.com.ar
    • Linkedin
Copyright 2016 Outright SRL. Todos los derechos reservados.