Tabs and accordions

Home > Core 5.6 functionality > DP custom blocks > Tabs and accordions

Tabs and accordions are a great way of organising a lot of content and adding some interactive features to your web page.

Adding tabs or accordions

Note: Watch in full screen mode to see the detail.

  1. Add a layout - You can add a layout to any content area on your website by left clicking on Add to main or other areas and selecting "Add layout".
  2. You will then be presented with a screen to enter the number of columns and rows. In most cases you will only need 1 column and the amount of rows dictates the number of accordions or tabs you require. 
    1. If you need 4 tabs or accordions enter 4 rows.
  3. You won't need to enter a figure for spacing or to lock widths. 
  4. When you click "add" your page will reload and you will see 4 new areas which will be named something like, Add to main : Layout 2 : Cell 1
  5. In each of these areas you can then add content block or other blocks for the content under each tab or accordion.
  6. The final stage is to add the Easy Tab or Easy Accordion block to control the content.
  7. You only need to add this once into a row.

Add more or remove tabs/accordions

Edit layout buttonEdit layout menuAdditional accordion
  1. When in edit mode, at the top of the list of blocks for your tabs/accordions there will be a grey line with a plus icon next to it.
  2. Click this and you will see the "edit layout" option.
  3. Increase (or decrease) the number of rows by the amount of new tabs or accordions you require (or wish to delete). 
  4. Click 'Save changes' and there will be a new "Add to main : Layout 2 : Cell 5" option at the bottom of this list. 
  5. You will need to move each content block down. Simply left click a block, select "Move" and your cursor icon will change enabling you to drag and drop a block into a new position.
  6. You can then add a new block into the top area "Add to main : Layout 2 : Cell 1" this will act at the first tab/accordion in the list. 
  7. Once your content is in place, left click the tabs or accordion block (in a grey box) and there will be an empty field. Move your titles down to reflect the changes - the top entry box is for the first tab or accordion.

Example accordions and tabs

Simply hover your mouse over the area of text you wish to edit. The content area or 'block' with turned dark grey and when you left click on the area a menu will appear.

Simply hover your mouse over the area of text you wish to edit. The content area or 'block' with turned dark grey and when you left click on the area a menu will appear.

Simply hover your mouse over the area of text you wish to edit. The content area or 'block' with turned dark grey and when you left click on the area a menu will appear.

Simply hover your mouse over the area of text you wish to edit. The content area or 'block' with turned dark grey and when you left click on the area a menu will appear.