Add Tabs and Accordions with Bootstrap 3 Components

Before you begin

We created a Bootstrap 3 page in Dreamweaver. Keep in mind that in order to use DMXzone Bootstrap 3 Components you need to have DMXzone Bootstrap 3 installed in your Dreamweaver.

Add the accordion

Let's start with the accordion. First, click anywhere on your page (1), where you want to place the accordion. Then, click the add accordion button (2) in the DMXzone Bootstrap 3 Components panel.

Add more panels

A single-panel accordion with default text is added on your page. You can edit the title of the panel, as well as its content. You can add another panel before, or after the selected one (1). We choose to place it after (2).

Customize the default titles

We change the default titles. Click on the little eye icon, in order to open the panel in design view.

Customize the default content

We can add any content inside it. Let's remove the default text (1) and add an unordered list inside. You can select unordered list from Bootstrap 3 Elements (2).

Accordion is done!

And we're done adding the accordion. Keep in mind that you can add as many panels as you need and customize them the way you want.

Add tabs

Click anywhere on your page (1), where you need to add the tabs. And click the add tabs button (2).

Add more tabs

Adding new tabs is as easy as adding panels in the accordion. Just click the add tab after button.

Move and delete tabs

You can move tabs left and right (1), also you can delete (2) tabs by clicking the delete tab button.

Save and preview

That's how easy it is to add tabs and accordions to your page, using DMXzone Bootstrap 3 Components extension.