WNCTG Accordion - Dark on Light

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 src="http://www.youtube.com/embed/4kgJqVbQJSw?rel=0" allow="autoplay; encrypted-media" allowfullscreen}{/iframe}{/div}