WNCTG Accordion - Light on Dark

Also see: Dark on Light Demo

Everything between Point A and Point B  is displayed by four different instances of the WNCTG Accordion block...

Point A

 

Bootstrap Accordion Group Title

This Group Description and the Group Title which appears directly above can both be displayed optionally.  And the Group and Panel Titles styles can be adjusted.

Accordion Group Titles & Desc 770x100.jpg

The Accordion block can be displayed as a Bootstrap Accordion or a JQuery-UI Accordion or as "Stacked" non-accordion titles with underlying content.  In addition the first panel can be pre-opened and the normal default speed of opening and closing a panel can be overridden.

Accordion Layout Format Row w DropDowns 770x100.jpg

Each Accordion can optionally display right, center or left aligned Expand/Collapse All buttons directly above the Accordion.

Accordion Buttons 770x95.jpg

The JQuery-UI and Bootstrap Accordions also have a number of options for changing the colors of the various components that make up an accordion.

Accordion Colors 770x115.jpg

  or click on Titles

Basic Accordion Instructions

Add an Accordion block to your page

  1. Enter edit mode by clicking on the Edit This Page pencil icon.
  2. Click on the Add Content to the Page + icon and drag an Accordion block onto the page and drop it at the desired location.
  3. The main edit mode dialog will open

Panels Tab

  1. Click on Add Panel button
  2. Click on Edit Panel button
  3. Enter a required Panel Title
  4. Enter Panel Content (first time around you can just add a few words and update later)
  5. Click on Collapse Panel button
  6. Repeat 1 through 5 as needed
  7. Click on Options Tab

Options Tab

  1. Enter a required Group Title
  2. Select Layout type as Accordion
  3. Select Accordion type as either Bootstrap or JQuery-UI
  4. Select a Panel Titles Style if Bootstrap is your Accordion type
  5. Click on the Save button
  6. Click on Publish Changes

Congratulations you have created your first accordion block.

 

Advanced Instructions

Panels Tab

Panel Title is required.

Panel Content contains the main content of each panel and can contain things like text, links, images, videos, etc.

Open or Closed? determines if the panel's contents will be visible for this panel when the accordion is first displayed.

Prevent Copying? can be checked if you do not want the user to select the contents of the individual panel.

 

Options Tab

Options: Group Title and Group Description and Miscellaneous Settings

Enter a Group Title (required) and Group Description (optional). They will show up above the accordion if you choose to display them. The Group Title will also show up as the title of the edit-mode block view place holder.

Check the Display Group Title and/or the Display Group Description checkbox if you want either of them to display on the page in view mode.

Select a Group Title Style as appropriate. Select a Panel Titles Style which will apply to all Layout=[Stacked] titles or to Layout=[Accordion] | Accordion=[Bootstrap] panel item titles but not the Layout=[Accordion] | Accordion=[JQuery-UI] panel item titles which always default to H3.

Check the Display Stacked Title checkbox if you want the individual panel item titles to display in Layout = “Stacked” mode.

Check the Do Not Print checkbox if you want to prevent this accordion from being printed if the page is printed.

 

Options: Group Layout

Choose between Layout format of “Stacked” or “Accordion”

If Layout=”Accordion” then choose whether to create a “Bootstrap” or “JQuery-UI” Accordion.

Click on the small green ? circle to open a popup help dialog.

Check the Open First Panel checkbox if you want the first panel of an Accordion to initially display as expanded.

If Animate Speed is set to zero then both Bootstrap and JQuery-UI Accordions use their respective default animate speeds. If the number is greater than 0 and less than 3001 milliseconds the new timing speed goes into effect.

 

Options: Optional Expand \ Collapse Button

Check the Show Expand All Button checkbox to display a single button for Bootstrap and dual buttons for JQuery-UI.

If you have chosen to show the button(s) then you can use Button Alignment to choose between “Left”, “Center” or “Right” alignment of the button(s).

You can also use Button Background to select a color other than the default color for the button(s) background color.

You may also add up to 40 character of text which will display to the right of the button as text.  The text will automatically be wrapped in tags.

 

Colors Tab

Click on the small green ? circle to view a popup dialog window which has a detailed image showing each of the accordion components and the color selector which effects each particular component.

Header Background sets a non-default background color for the unselected header panels of the accordion.

Active Header Background (JQuery-UI only) sets a non-default background color for the selected header panel of the accordion.

Content Background sets a non-default background color for the drop-down content panels of the accordion.

Active Text (JQuery-UI only) sets a non-default text color for the text on the selected header panel of the accordion.

Hover Text sets a non-default text color for the text on all header panels except the selected panel of the accordion.

Hover Background (JQuery-UI only) sets a non-default background color for the text on all header panels except the selected panel of the accordion.

The Existing Body Background, Existing Page Background and Existing Normal Text colors are for reference only. You can copy and paste any of these existing colors into their matching color selectors below each Existing color selector if your desire is to have the Accordion match the existing colors in case there are not doing so already.

You can also use the color selectors to force a change of the existing colors.

All the color selectors will be visible when Layout=[Accordion] and Accordion=[JQuery-UI] and they both must be selected whenever you might want to make sure that any unneeded colors are set to default [X].  All other combinations of Layout and Accordion will result in some of the color selectors not being visible.

 

Additional Information

Important

Important: If (1) you have two or more Accordion blocks of any Layout type AND if (2) you have set any of the colors in the Color Tab on any block you will need to set the same colors to the same values in the other blocks. This is because they all share common CSS and it needs to be consistent. The issues you will probably see, if you do not match the colors, is the caret colors on the JQuery_UI Accordion may not be matched appropriately to the background color and some colors may return to their default values. The last Accordion block on the page is the one all the other Accordion blocks will use for their CSS, but the other blocks need to also have the same colors set so that the default colors don't override the selected colors on the blocks other than the last block.  This may change with future upgrades.

Important: The JQUery-UI Accordion's caret icons switch from light to dark whenever the panel's Header Background color or the Active Header Background color has an HSL Lightness > 69%.

 

Sample Embedded Responsive Video Code

For Elemental or Cloneamental themes place the CSS code in  Design | Theme Customize | Custom CSS

Place the HTML in the Panel Content after first pressing the Source button.

CSS:

.wnctg-embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } .wnctg-embed-container iframe, .wnctg-embed-container object, .wnctg-embed-container embed, .wnctg-embed-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

HTML:

replace {} with <>

{div class="wnctg-embed-container"}{iframe allowfullscreen="" feature="player_embedded" frameborder="0" src="http://www.youtube.com/embed/4kgJqVbQJSw?rel=0"}{/iframe}{/div}

 

JQuery-UI Accordion in Stack

This JQuery-UI Accordion is imbedded in a Stack.

   or click on Titles

 Panel Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.

 Panel Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.

 Panel Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.

JQuery-UI Accordion Group Title

   

 Panel Title 1

This Accordion Group is showing only the Group Title but not the Group Description.

The Animation Speed has been set to the maximum setting of 1000ms.

The Open First Panel option has been checked.

 Panel Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.

 Panel Title 3

Donec sed felis sapien. Pellentesque in purus id lectus malesuada vulputate. Suspendisse et lectus quam. Vivamus est turpis, consequat at dui id, hendrerit tempus dolor. Vestibulum ac libero ex. Curabitur mollis eros sed diam tempor, nec interdum metus suscipit. Fusce non tincidunt eros. Curabitur sollicitudin non dolor condimentum commodo. Maecenas hendrerit nunc turpis, eu dictum erat mollis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu venenatis orci, ut rutrum leo. Maecenas commodo rhoncus nibh sit amet porta. Phasellus eu justo ut diam bibendum convallis tincidunt eu neque.

 Panel Title 4

Phasellus suscipit pretium hendrerit. Sed at nibh viverra, pulvinar quam at, fermentum neque. Nulla non mauris vel dui sodales ornare. Aenean vel erat gravida, varius dui non, tempor lectus. Aenean vehicula tortor tellus, eget elementum enim suscipit sit amet. Nunc pellentesque velit vitae scelerisque molestie. Curabitur pellentesque est id volutpat sagittis. Curabitur quis enim sagittis, malesuada eros vitae, semper ante. Nulla finibus ex pellentesque, convallis velit in, lacinia dolor. Vivamus pulvinar velit a nibh ultrices posuere. Maecenas ullamcorper nibh ipsum, vitae ultricies justo venenatis sed. Sed massa nunc, blandit vulputate vestibulum at, tincidunt non erat. Pellentesque porttitor vel magna ac tempor. Nullam rutrum, ante vel dignissim vestibulum, tellus ante suscipit ex, ut consequat leo nibh sit amet augue. Cras laoreet, dolor sodales tempor elementum, est augue ultricies elit, eu hendrerit ligula orci non enim.

Stacked Non-Accordian Group Title

This is a Stacked Non-Accordion with the Group Title and Group Description being displayed above the titles and contents of three accordion panels without the panels.

Panel Title 1

Pellentesque maximus porta ex ut sagittis. Proin euismod accumsan velit, vel luctus turpis suscipit vitae. Mauris pharetra ante massa, id molestie nisl dapibus vitae. In suscipit ex ut mattis posuere. Integer facilisis ut eros at malesuada. Curabitur tellus lectus, fringilla id massa sit amet, scelerisque pretium massa. Pellentesque porta aliquet blandit. Quisque at fringilla leo. Praesent ipsum est, feugiat quis enim vel, rutrum placerat massa. Nunc ac feugiat leo. Aenean nibh tellus, porta quis mattis maximus, varius iaculis turpis. Pellentesque suscipit ipsum accumsan libero vehicula semper. Curabitur sit amet neque justo. In convallis erat quis auctor placerat. Duis dapibus magna sit amet pretium fringilla. Aenean in erat feugiat, rhoncus tortor nec, vestibulum turpis.

Panel Title 2

Donec sed felis sapien. Pellentesque in purus id lectus malesuada vulputate. Suspendisse et lectus quam. Vivamus est turpis, consequat at dui id, hendrerit tempus dolor. Vestibulum ac libero ex. Curabitur mollis eros sed diam tempor, nec interdum metus suscipit. Fusce non tincidunt eros. Curabitur sollicitudin non dolor condimentum commodo. Maecenas hendrerit nunc turpis, eu dictum erat mollis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu venenatis orci, ut rutrum leo. Maecenas commodo rhoncus nibh sit amet porta. Phasellus eu justo ut diam bibendum convallis tincidunt eu neque.

Panel Title 3

Proin tortor tortor, pretium nec odio eget, congue ullamcorper leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec cursus lacus et justo fermentum consectetur. Pellentesque nunc diam, sollicitudin at risus sit amet, vestibulum venenatis sem. Donec aliquet turpis id vehicula tincidunt. Vestibulum vehicula libero ex, et cursus velit bibendum ac. Ut nec scelerisque nisl. Proin ac nulla ut velit fringilla mattis nec quis nulla. Sed tristique interdum ipsum quis elementum. Vestibulum scelerisque massa ut enim rutrum, eget feugiat nunc faucibus.

Point B

 

The following images show:

1. the four Accordion blocks in Edit Mode,

2. the Options Tab of the Bootstrap Accordion, and

3. the Colors Tab (top & bottom views) of the Bootstrap Accordion

4. the Colors map

 

 

Here is the Options Tab for the Bootstrap Accordion...

 

The default Accordion colors are designed for dark text on a light background.  For this page we needed to set some of the colors to override the default colors in order to achieve an acceptable look for light text on a dark background...

 

 

Here is diagram to show how the colors are mapped to the Accordion panels...