Accordion Panels

The Accordion Panel are part of the basic Bootstrap CSS framework. We've taken the component and styled it with a bit of CSS to really bring it to life!. You can include any HTML content in your panels.

Tips


Instructions

Accordion Panels

In this tutorial, we’ll demonstrate how to update the content and headings in the Accordion Panel Component. We’ll also demonstrate how to add and remove panels. The Accordion Panels are part of the Bootstrap CSS framework.You can learn more about them here. The Accordion Panels may contain any type of HTML, if you can add it to your page, you can add it to your panel. The only consideration you may need to make is height and width if you’re using images, and if using video you’ll want to make sure it’s not set to ‘auto’ play.

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, just right click on the placeholder image, and select Open file:/// .. your Library page will open, and you can quickly edit the content.

Video Demonstration: Quick edit
http://youtu.be/BghC7Tpxs-w

  1. First, locate the component placeholder in your page.
  2. Right click on the placeholder and select ‘Open file:///…’
  3. You components Library page will open in a new window, ready for editing.

 

Change the Heading and Content

Video Demonstration: Update the headings
http://youtu.be/XfsFuckCS00
Video Demonstration: Update the content
http://youtu.be/rTPSqIbY1TE

  1. Expand the Library / component / accordion-panels (folder).
  2. Double click on the ‘accodion-panels.htm’ page to open.
  3. At the very top of the page you’ll see the component header, this is just an H2 title that you can use to describe what’s in the Accordion Panels, or remove it completely.

The Accordion Panels include an h4 heading, an image, a couple of paragraphs, a bullet list and a link ( that links to the tutorials ). You can simple update what’s there or completely remove it and add your own HTML content. What you see between and including the h4 title, and the ( Click here for the … tutorials) create the contents of a single panel. Edit the content as you would any web page.

Remove Panels

Video Demonstration: Remove panels
http://youtu.be/Aqw7lqA5YmY

  1. Expand the Library / component / accordion-panels (folder).
  2. Double click on the ‘accodion-panels.htm’ page to open.
  3. Click on the h4 title ( or any content ) of the panel you want to remove.
  4. Move your mouse up to the ‘Quick Tag Selector’ toolbar, locate and click the [ <div.panel panel-d...> ] tag to select the entire panel and it’s contents.
  5. You’ll see the panel contents selected in your page, highlighted in green and wrapped in a darker green border.
  6. Press the Delete key on your keyboard.

Add Panels

Video Demonstration: Add panels
http://youtu.be/iDqZtmRiPVA

  1. Expand the Library / component / accordion-panels (folder).
  2. Double click on the ‘accodion-panels.htm’ page to open.
  3. Switch to code view.
  4. Copy an existing panel and it’s comment tags.
  5. Paste where you want your new panel to appear.
  6. change the ( id=collapse# and href=”#collapse# ) to the next highest number available, the number does not ‘need’ to be the next highest number in the sequence nor does it even need to be a number, as long as the ( id= and href= ) match as in this screenshot.
  7. Switch back to Design view, and edit the contents of the copied / pasted panel.

Font Styles

All font styles for the Accordion panels can be found in the:

Library / components / accordion-panels / css (folder)

  • accordion-panels.css

Accordion Panels

In this tutorial, we’ll demonstrate how to update the content and headings in the Accordion Panel Component. We’ll also demonstrate how to add and remove panels. The Accordion Panels are part of the Bootstrap CSS framework.You can learn more about them here. The Accordion Panels contain any type of HTML, if you can add it to your page, you can add it to your panel. The only consideration you may need to make is height and width if you’re using images, and if using video you’ll want to make sure it’s not set to ‘auto’ play.

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, press and hold the ( Alt ) key on your keyboard, while you click on the ‘pladeholder’ image, then click on ( accordion-panels.lbi ) .. your Library page will open, and you can quickly edit the content.

Video Demonstration: Quick edit
http://youtu.be/w_e6VtcvpHU

 

Change the Heading and Content

Video Demonstration: Update the headings
http://youtu.be/Flc-KJOHIGg
Video Demonstration: Update the content
http://youtu.be/Ymk9mBu2hBg

 

  1. Expand the Library / component / accordion-panels (folder).
  2. Double click on the ‘accodion-panels.lbi’ page to open.
  3. At the very top of the page you’ll see the component header, this is just an H2 title that you can use to describe what’s in the Accordion Panels, or remove it completely.

The Accordion Panels include an h4 heading, an image, a couple of paragraphs, a bullet list and a link ( that links to the tutorials ). You can simple update what’s there or completely remove it and add your own HTML content. What you see between and including the h4 title, and the ( Click here for the … tutorials) create the contents of a single panel. Edit the content as you would any web page.

Remove Panels

Video Demonstration: Remove panels
http://youtu.be/HfczngVo_Rw

  1. Make sure the Properties panel is open ( Ctrl+F3 ).
  2. Expand the Library / component / accordion-panels (folder).
  3. Double click on the ‘accodion-panels.lib’ page to open.
  4. Click on the h4 title ( or any content ) of the panel you want to remove.
  5. Move your mouse up to the ‘Quick Tag Selector’ toolbar, locate and click the <div.panel panel-default>  tag to select the entire panel and it’s contents.
  6. You’ll see the panel contents selected in your page, highlighted and wrapped in a darker blue border.
  7. Press the Delete key on your keyboard.

Add Panels

Video Demonstration: Add panels
http://youtu.be/L6gBew0I8pg

  1. Expand the Library / component / accordion-panels (folder).
  2. Double click on the ‘accodion-panels.lib’ page to open.
  3. Switch to code view.
  4. Copy an existing panel and it’s comment tags.
  5. Paste where you want your new panel to appear.
  6. change the ( id=collapse# and href=”#collapse# ) to the next highest number available, the number does not ‘need’ to be the next highest number in the sequence nor does it even need to be a number, as long as the ( id= and href= ) match as in this screenshot.
  7. Switch back to Design view, and edit the contents of the copied / pasted panel.

Font Styles

All font styles for the Accordion panels can be found in the:

Library / components / accordion-panels / css (folder)

  • accordion-panels.css