Easy Accordion Pro

  1. Home
  2. Docs
  3. Easy Accordion Pro
  4. Features & Functionalities
  5. Tab: DISPLAY SETTINGS

Tab: DISPLAY SETTINGS

Accordion Section

Accordion Section Title:

If the option is set to ‘ON‘, the Accordion title will be shown as the section title in the frontend. The feature is turned ‘OFF‘ by default.

A user can also set space between the section title and the accordion from the ‘Accordion Section Title Margin Bottom‘ field.

 

 

Margin Between Items:

The feature is to set margin between items. It will create space between the items. The default value is 10px.

 

 

Accordion Expand & Collapse Icons

Expand & Collapse Icons:

The feature is to show/hide Expand-Collapse icons in the accordion. These icons make an accordion fascinating. If the feature is turned ‘ON‘, the icons will be shown in the accordion.

Note: Keeping ‘ON‘ the ‘Font Awesome CSS‘ from the ‘Settings‘ field is mandatory. If there is another font-awesome file in the site, it can be kept ‘OFF‘ from the ‘Settings‘ field to avoid extra loading.

 

Expand & Collapse Icon Style:

There are fifteen sets of icon to use for Expanding & Collapsing. You can use them as you like.

 

Expand & Collapse Icon Size:

This feature is to adjust the Expand & Collapse Icon size. As the icon position is with the title in the accordion and the title’s font-size can be different on the various page, so it is needed to adjust the icon size to look better.

Also, you can stylize your accordion by increasing or decreasing the icon size from here. The default icon size is 16 px.

 

 

Margin Between Collapsible Icon and Title:

A user can easily set the space between the Collapsible icon and the title. The margin applies from the right-side of the icon and it can be kept in mind when a user set the icon’s position to ‘Right‘ from the below option. The default value is 10px.

 

Icon Color:

A user can set icon color with this feature. Three types of color can be set like:

  • Color                = For general state
  • Active color    = For active state
  • Hover Color   = For Hovering state

 

 

Expand & Collapse Icon Position:

The Expand & Collapse Icon can be positioned in four places like:

Vertical Mode: 

  • Left
  • Right

 

Horizontal Mode:

  • Top
  • Bottom

 

 

Accordion Item Title & Description

 

Item Border:

A user can set a stylized border for accordion items from here.

Available Options:

  • Border size
  • Border Style
  • Border Color

 

Examples:

 

 

Item Border Radius:

A user can set border-radius the accordion items from here.

Examples:

 

 

Title Icon: 

A user can set icons for the items’ title easily.

To add the icon for a title, there is an ‘Add Icon‘ button in the editor field. Add an icon by clicking on this button and keep the ‘Title Icon‘ switch ‘ON‘.

 

 

Title Icon Color: 

This feature is to set a color for the title’s icon.

Available options:

  • Color                = For general state
  • Active color    = For active/focus state
  • Hover Color   = For Hover state

 

 

 

Title Background Color: 

This feature is to set a background color for the title area.

Available options:

  • Color                = For general state
  • Active color    = For active/focus state
  • Hover Color   = For Hover state

 

 

 

HTML Title Tag:

A user can define a heading tag for the title text like H1, H2, H3, H4, H5, H6 with this feature. This title tag plays an important role in the term of SEO. It helps a page to get a good rank on the search engine.

 

 

Strip all HTML tags from Description Content: 

Sometimes it is needed to show the content removing the HTML markup from accordion items. Stripping HTML tags can be done with this feature.

If the feature is unchecked, the content will be displayed as in the editor.

 

 

If the feature is checked, the content will be displayed without HTML markup and style

 

 

 

Title Padding: 

This feature is to set title padding for the accordion items. A user can easily set padding at the top, bottom, left, and right of the titles.

 

 

 

Description Background Color: 

This feature is to set description/content background color. A user can easily set the background color for accordion descriptions.

 

 

 

Description Padding: 

This feature is to set description/content padding for the accordion items. A user can easily set padding at the top, bottom, left, and right of the description/content.

 

 

 

Accordion Animation

 

 

Animation: 

This switch is to turning ‘ON/OFF‘ the animation feature for an accordion.

Note: Animation feature won’t work if the ‘Animation CSS‘ file is dequeued from the ‘SettingsADVANCED SETTINGS‘ field of the plugin.

 

 

Animation Types: 

A user can set a type of animations from here. There are 21 types of animations.

Available animations:

  • FadeIn
  • FadeInLeft
  • FadeInUp
  • FadeInDownBig
  • Shake
  • Swing
  • RollIn
  • Bounce
  • Wobble
  • SlideInDown
  • SlideInLeft
  • SlideInUp
  • ZoomIn
  • ZoomInDown
  • ZoomInUp
  • ZoomInLeft
  • BounceIn
  • BounceInDown
  • BounceInUp
  • Jello
  • RubberBand

 

 

Transition Time: 

The ‘Transition Time‘ feature refers to the opening and closing time of an accordion item. The default value is 500ms.

Value Increasing Effect: An accordion item will open and close slowly.

Value Decreasing Effect: An accordion item will open and close quickly.