Accordion Block

1st tab open. Close others on click.

Accordion block

Chicharrones photo booth franzen yr butcher la croix gochujang, iceland taiyaki. Poutine fixie crucifix prism, iceland wayfarers leggings. Whatever woke blog scenester aesthetic mumblecore. Tote bag brooklyn fixie thundercats, tousled artisan salvia disrupt. Occupy lo-fi pop-up, forage cold-pressed meggings shaman. Franzen four dollar toast iceland gastropub PBR&B.

Keytar plaid tousled offa

Church-key sartorial banjo master cleanse cray disrupt. Organic letterpress gochujang chia, banh mi chartreuse plaid listicle next level ennui vegan. Cold-pressed before they sold out truffaut fingerstache migas kale chips shoreditch wayfarers selfies iceland succulents literally tbh chartreuse selvage.

Ennui narwhal lumbersexual squid snackwave

Ennui narwhal lumbersexual squid snackwave. Organic readymade authentic, mumblecore unicorn semiotics retro taxidermy iceland activated charcoal synth bitters hexagon truffaut.

Select a different default open tab. On click keep others open.

Accordion block

Chicharrones photo booth franzen yr butcher la croix gochujang, iceland taiyaki. Poutine fixie crucifix prism, iceland wayfarers leggings. Whatever woke blog scenester aesthetic mumblecore. Tote bag brooklyn fixie thundercats, tousled artisan salvia disrupt. Occupy lo-fi pop-up, forage cold-pressed meggings shaman. Franzen four dollar toast iceland gastropub PBR&B.

Keytar plaid tousled offa

Church-key sartorial banjo master cleanse cray disrupt. Organic letterpress gochujang chia, banh mi chartreuse plaid listicle next level ennui vegan. Cold-pressed before they sold out truffaut fingerstache migas kale chips shoreditch wayfarers selfies iceland succulents literally tbh chartreuse selvage.

Ennui narwhal lumbersexual squid snackwave

Ennui narwhal lumbersexual squid snackwave. Organic readymade authentic, mumblecore unicorn semiotics retro taxidermy iceland activated charcoal synth bitters hexagon truffaut.

All tabs initially closed

Accordion block

Chicharrones photo booth franzen yr butcher la croix gochujang, iceland taiyaki. Poutine fixie crucifix prism, iceland wayfarers leggings. Whatever woke blog scenester aesthetic mumblecore. Tote bag brooklyn fixie thundercats, tousled artisan salvia disrupt. Occupy lo-fi pop-up, forage cold-pressed meggings shaman. Franzen four dollar toast iceland gastropub PBR&B.

Keytar plaid tousled offa

Church-key sartorial banjo master cleanse cray disrupt. Organic letterpress gochujang chia, banh mi chartreuse plaid listicle next level ennui vegan. Cold-pressed before they sold out truffaut fingerstache migas kale chips shoreditch wayfarers selfies iceland succulents literally tbh chartreuse selvage.

Ennui narwhal lumbersexual squid snackwave

Ennui narwhal lumbersexual squid snackwave. Organic readymade authentic, mumblecore unicorn semiotics retro taxidermy iceland activated charcoal synth bitters hexagon truffaut.

Accordion Settings

Under the Accordion Settings tab you can set up how the Accordion will work. There are three available options:

  1. From the number of tabs slider you can select how many tabs the accordion will have.
  2. If the collapse others on click switch is on clicking to open one tab will close/collapse the currently open one.
  3. You can have one tab be open on page load by selecting it and toggling the start current tab open switch. This is a per tab option and you can have more than one tabs set to be open by default.

Block Appearance

Under Block Appearance you can customize the look of the block. The available options are:

  1. Title Text Color: This option controls the color of the tab title’s text, for Default, Hover and Active State.
  2. Title Background Color: This option controls the color of the tab title’s background, for Default, Hover and Active State.
  3. Content Text Color: This option controls the color of the content text.
  4. Content Background Color: This option controls the background color of the content area.
  5. Border Color: This option modifies the color of the block’s borders.
  6. Padding: With this option you can control the padding on each side of the block individually or all at once.
  7. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.


Animation Settings

Via the Animation controls panel you can set up how you want the block to animate upon entering the viewport as your visitors scroll.

  1. Animation type: Choose the animation type for the block. You can select from Fade, Slide Up / Down / Left / Right, Zoom In / Out, and Flip Up / Down / Left / Right. Set to None if you want to disable the animation.
  2. Duration: Controls how long the animation will take from start to finish. Defaults to 0.7 seconds.
  3. Delay: Controls the delay from the moment the element enters the viewport to the moment when the animation will begin.
  4. Easing: Controls the animation’s easing. Refer to the easings page for a visual representation.
  5. Repeat animation: Repeat the animation for the block every time it enters the viewport. While your users scroll down the animation will fire, and when they scroll back up it will fire again. Every time the block leaves the viewport the animation will be reset.

Note: If you don’t plan on using animations you can turn them off globally in Settings > GutenBee settings. You can disable the “Enable block animation controls” checkbox and the animation panels and scripts will stop showing up and loading.