Rate this docs

Vue Bootstrap accordion

Vue Accordion - Bootstrap 4 & Material Design

Vue Bootstrap accordion is a component which organizes content within collapsable items. Accordion allows showing only one collapsed item at the same time.

Accordions can toggle through a number of text blocks with a single click, and that greatly increases the UX of your project.

Examples of Bootstrap Accordion use:

  • FAQ page
  • Multiple items presentation
  • Data tables

Default Accordion

Default styling for Bootstrap Accordion component

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.

              <accordion :panes="panes"/>
            

              import { Accordion } from 'mdbvue';
              export default {
                components: {
                  Accordion,
                },
                data() {
                  return {
                    panes: [
                      {
                        title: 'Collapsible Group Item #1',
                        content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                                  3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                                  Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                  Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable.'
                      }, {
                        title: 'Collapsible Group Item #2',
                        content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                                  3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                                  Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                  Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable.'
                      },
                      {
                        title: 'Collapsible Group Item #3',
                        content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                                  3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                                  Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                  Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable.'
                      }
                    ]
                  };
                }
              };
            

Material Accordion MDB Pro component

Material Design styling for Bootstrap Accordion component

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

              <accordion :panes="panes" material></accordion>
            

  import { Accordion } from 'mdbvue';

  export default {
    components: {
      Accodion
    },
    data() {
      return {
        panes: [
          {
            title: 'Collapsible Group Item #1',
            content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.'
          }, {
            title: 'Collapsible Group Item #2',
            content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.'
          },
          {
            title: 'Collapsible Group Item #3',
            content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.'
          },
        ]
      }
    }
  };

Vue Accordion - API

In this section you will find information about how exactly to make accordion truly yours.


Accordion

Name Type Default Description
:panes Object / Array null Data array used to generate panes automatically. Each object within should have a titile, content and optionally icon property
:open Number null MDB Vue Accordions start off with panes closed. To alternate this behavior, add the prop specifying the number of you want to have open on initial render. Remember - the numeration here start with 0. Since you are providing component a number prop, remember to have its props type respected by adding a colon
default boolean true Bootstrap default accordion style
material boolean false Accordion in accordance with Material Design standard
picture boolean false The style involving light blue headers
icon boolean false Accordeon with this style shall have a white background and utilise an :panes data array object icon property in a blood-red manner
color String null The prop hooks you up with our "Five Shades of Pane" accordion, accepting any of our colors
photoBg boolean false It utilized styles typical to the photo background accordion
table boolean false Helps to set up a highly-readable table-based accordion component
tag String div Allows to alter component's native HTML tag.

AccordionPane

In case you would like your panes custom, here is an API for component used to display accordion's content. Remember - having it that way lays the burden of operating logic on your shoulders! Refer to the table accordion example to see the methods and the data object that should be provided for accordion to work.

Name Type Default Description
style String default Specifies the type of styling on a pane-to-pane basis, using the style names from the Accordion table above or from the examples section
:isOpen Boolean -- Source of truth about wether the pane should be open or not, entrance point for custom logic
title String -- Used by accodion component in pane generation. Can be utilized for manual pane's title input, but offers little to no advantage over having a custom header component
content String -- This is what shall be injected as pane content, being hidden and shown on isOpen being evaluated as false
color String null The prop hooks you up with our "Five Shades of Pane" accordion, accepting any of our colors
order Number -- Marks pane's orderder of appearence to calculate consequtive shades on color shades accordion's pane, of little intereset otherwise
icon String -- Features an icon to be used in icons accordion's pane

Vue Accordion - examples & customization

Accordion with gradient background MDB Pro component

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


                <row center class="accordion-gradient-bcg">
                  <column md="10" xl="6" class="py-5">
                    <accordion :panes="panes" gradient></accordion>
                  </column>
                </row>
            

  import { Accordion, Row, Column } from 'mdbvue';

  export default {
    components: {
      Accodion,
      Row,
      Column
    },
    data() {
      return {
        panes: [
          {
            title: '#1',
            content: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable."
          },
          {
            title: '#2',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
          },
          {
            title: '#3',
            content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
                      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                      sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.'
          }
        ],
      }
    }
  };

Accordion with a picture MDB Pro component

Hi! I am the first one.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Hi! I am the second one.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Hi! I am the third one.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


              <accordion :panes="panes" picture></accordion>
            

  import { Accordion } from 'mdbvue';

  export default {
    components: {
      Accodion
    },
    data() {
      return {
        panesPicture: [
          {
            title: 'I am the first title of accordion',
            content: `<div class="row my-4">
                        <div class="col-md-8">
                            <h3 class="font-weight-bold mb-3 black-text">Hi! I am the first one.</h3>
                            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                        <div class="col-md-4 mt-3 pt-2">
                            <div class="view z-depth-1">
                                <img src="https://mdbootstrap.com/img/Photos/Others/nature.jpeg" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>`
          },{
            title: 'I am the second title of accordion',
            content: `<div class="row my-4">
                        <div class="col-md-8">
                            <h3 class="font-weight-bold mb-3 black-text">Hi! I am the second one.</h3>
                            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                        <div class="col-md-4 mt-3 pt-2">
                            <div class="view z-depth-1">
                                <img src="https://mdbootstrap.com/img/Photos/Others/nature.jpeg" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>`
          },{
            title: 'I am the third title of accordion',
            content: `<div class="row my-4">
                        <div class="col-md-8">
                            <h3 class="font-weight-bold mb-3 black-text">Hi! I am the third one.</h3>
                            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                        <div class="col-md-4 mt-3 pt-2">
                            <div class="view z-depth-1">
                                <img src="https://mdbootstrap.com/img/Photos/Others/nature.jpeg" alt="" class="img-fluid">
                            </div>
                        </div>
                    </div>`
          }
        ],
      }
    }
  };

Accordion with icons MDB Pro component

Hello my friends, I am the nicest accordion!


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.


              <accordion :panes="panes" icon></accordion>
            

  import { Accordion } from 'mdbvue';

  export default {
    components: {
      Accodion
    },
    data() {
      return {
        panes: [
          {
            title: 'How awesome accordion I am?',
            content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.'
          },{
            title: 'You\'re the greatest accordion!',
            content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.'
          },{
            title: 'Thank you my dear!',
            content: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                      Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.'
          }
        ],
      }
    }
  };

Color shades accordion MDB Pro component

The accordion takes in a name of a color and creates makup with consecutive shades of it.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.


              <accordion :panes="panes" shades="teal"></accordion>
            

  import { Accordion } from 'mdbvue';

  export default {
    components: {
      Accodion
    },
    data() {
      return {
        panes: [
        {
          title: 'First title',
          content: `<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et.</p>

                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore.</p>`
        },
        {
          title: 'Second title',
          content: `<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et.</p>

                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore.</p>`
        },
        {
          title: 'Third title',
          content: `<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et.</p>

                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore.</p>`
        },
        {
          title:'Fourth title',
          content: `<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et.</p>

                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore.</p>`
        },
        {
          title: 'Fifth title',
          content: `<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et.</p>

                <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                accusamus labore.</p>`
        }
      ],
      }
    }
  };

Accordion with a photo in the background MDB Pro component

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.


                <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">
                  <div class="rgba-black-strong py-5 px-4">
                    <row center>
                      <column md="10" xl="8">
                        <accordion :panes="panes" photoBg></accordion>
                      </column>
                    </row>
                  </div>
                </div>
            

  import { Accordion } from 'mdbvue';

  export default {
    components: {
      Accodion
    },
    data() {
      return {
        panes: [
          {
            title: 'Item #1',
            icon: 'cloud',
            content: `<p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                                            3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                                            shoreditch et.</p>`
          },
          {
            title: 'Item #2',
            icon: 'commenting-o',
            content: `<p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                                            3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                                            shoreditch et.</p>`
          },
          {
            title: 'Item #3',
            icon: 'cogs',
            content: `<p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                                            3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                                            shoreditch et.</p>`
          },
        ]
      }
    }
  };

Accordion with a table MDB Pro component

The accodions use provided title and content data to generate panes and headers. These can include simple HTML, too! Sometimes, though, the situation necessitates a custom solution involving including other components into these headers and content. This is why below we present a case, where the automatic panes generation feature gets hijacked, and the markup is created manually, allowing for usage of other mdb components, like Dropdown.

Note:This solution involves emulating features naturally implemented into the auto-generated accordion panes, namely - the opening and closing function. As such, they need to be added as well - please have a look into the methods object in <script> section.

Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017
Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017
Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017
Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017

      <accordion table >
        <accordion-pane title="Unfiled items" type="table" :isOpen="openPaneNum==0" @pane-clicked="handlePaneOpened(0)">
          <dropdown style="display: block" slot="title">
            <dropdown-toggle color="info" slot="toggle" class="pull-left dropdown mr-3" style="padding: 8px"><fa icon="pencil"/></dropdown-toggle>
            <dropdown-menu color="info">
              <dropdown-item>Add new condition</dropdown-item>
              <dropdown-item>Rename folder</dropdown-item>
              <dropdown-item>Delete folder</dropdown-item>
            </dropdown-menu>
          </dropdown>
          <div class="table-ui p-2 mb-3 mx-3 mb-4">
            <row>
              <column xl="4" lg="6" md="12">
                <mdb-select :options="[
                  {value: null, text: 'Bulk actions', disabled: true, selected: true},
                  {value: 1, text: 'Delete'},
                  {value: 2, text: 'Change folder'}
                ]" />
              </column>
              <column xl="4" lg="6" md="6">
                <mdb-select :options="[
                  {value: null, text: 'Show only', disabled: true},
                  {value: 1, text: 'All (2000)', selected: true},
                  {value: 2, text: 'Clicks (200)'},
                  {value: 3, text: 'Page (1800)'},
                  {value: 4, text: 'Scroll (200)'},
                  {value: 5, text: 'Forms (50)'},
                  {value: 6, text: 'Time (50)'},
                  {value: 7, text: 'UTM (50)'}
                ]" />
              </column>
              <column xl="4" lg="6" md="6">
                <mdb-select :options="[
                  {value: null, text: 'Filter', disabled: true, selected: true},
                  {value: 1, text: 'All (100)'},
                  {value: 2, text: 'Active (2000)'},
                  {value: 3, text: 'Inactive (1000)'}
                ]" />
              </column>
            </row>
            </div>
            <div class="table-responsive mx-3">
              <!--Table-->
              <table class="table table-hover mb-0">

                <!--Table head-->
                <thead>
                  <tr>
                    <th>
                      <input class="form-check-input" type="checkbox" id="checkbox7">
                      <label for="checkbox7" class="mr-2 label-table"></label>
                    </th>
                    <th class="th-lg">
                      <a>Name
                        <i class="fa fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a>Condition
                        <i class="fa fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a>Last edited
                        <i class="fa fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th></th>
                  </tr>
                </thead>
                <!--Table head-->

                <!--Table body-->
                <tbody>
                  <tr>
                    <th scope="row">
                      <input class="form-check-input" type="checkbox" id="checkbox8">
                      <label for="checkbox8" class="label-table"></label>
                    </th>
                    <td>Test subscription</td>
                    <td>
                      <code>Scroll%&lt;/code&gt;equals or greater than
                      <strong>80</strong>
                    </td>
                    <td>12.06.2017</td>
                    <td>
                      <a>
                        <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                      </a>
                      <a>
                        <i class="fa fa-pencil-square mx-1"></i>
                      </a>
                      <a>
                        <i class="fa fa-times mx-1"></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <input class="form-check-input" type="checkbox" id="checkbox9">
                      <label for="checkbox9" class="label-table"></label>
                    </th>
                    <td>Product Hunt Visitor</td>
                    <td>
                      <code>Scroll%&lt;/code&gt;equals or greater than
                      <strong>80</strong>
                    </td>
                    <td>13.06.2017</td>
                    <td>
                      <a>
                        <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                      </a>
                      <a>
                        <i class="fa fa-pencil-square mx-1"></i>
                      </a>
                      <a>
                        <i class="fa fa-times mx-1"></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      <input class="form-check-input" type="checkbox" id="checkbox10">
                      <label for="checkbox10" class="label-table"></label>
                    </th>
                    <td>Test subscription</td>
                    <td>
                      <code>Scroll%&lt;/code&gt;equals or greater than
                      <strong>80</strong>
                    </td>
                    <td>12.06.2017</td>
                    <td>
                      <a>
                        <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                      </a>
                      <a>
                        <i class="fa fa-pencil-square mx-1"></i>
                      </a>
                      <a>
                        <i class="fa fa-times mx-1"></i>
                      </a>
                    </td>
                  </tr>
                </tbody>
                <!--Table body-->
              </table>
              <!--Table-->
            </div>
            </accordion-pane>
            <accordion-pane title="Folder 1" type="table" :isOpen="openPaneNum==1" @pane-clicked="handlePaneOpened(1)">
              <dropdown style="display: block" slot="title">
                <dropdown-toggle color="info" slot="toggle" class="pull-left dropdown mr-3" style="padding: 8px">
                  <fa icon="pencil" />
                </dropdown-toggle>
                <dropdown-menu color="info">
                  <dropdown-item>Add new condition</dropdown-item>
                  <dropdown-item>Rename folder</dropdown-item>
                  <dropdown-item>Delete folder</dropdown-item>
                </dropdown-menu>
              </dropdown>
              <div class="table-ui p-2 mb-3 mx-3 mb-4">
                <row>
                  <column xl="4" lg="6" md="12">
                    <mdb-select :options="[
                      {value: null, text: 'Bulk actions', disabled: true, selected: true},
                      {value: 1, text: 'Delete'},
                      {value: 2, text: 'Change folder'}
                    ]" />
                  </column>
                  <column xl="4" lg="6" md="6">
                    <mdb-select :options="[
                      {value: null, text: 'Show only', disabled: true},
                      {value: 1, text: 'All (2000)', selected: true},
                      {value: 2, text: 'Clicks (200)'},
                      {value: 3, text: 'Page (1800)'},
                      {value: 4, text: 'Scroll (200)'},
                      {value: 5, text: 'Forms (50)'},
                      {value: 6, text: 'Time (50)'},
                      {value: 7, text: 'UTM (50)'}
                    ]" />
                  </column>
                  <column xl="4" lg="6" md="6">
                    <mdb-select :options="[
                      {value: null, text: 'Filter', disabled: true, selected: true},
                      {value: 1, text: 'All (100)'},
                      {value: 2, text: 'Active (2000)'},
                      {value: 3, text: 'Inactive (1000)'}
                    ]" />
                  </column>
                </row>
              </div>
              <div class="table-responsive mx-3">
                <!--Table-->
                <table class="table table-hover mb-0">

                  <!--Table head-->
                  <thead>
                    <tr>
                      <th>
                        <input class="form-check-input" type="checkbox" id="checkbox7">
                        <label for="checkbox7" class="mr-2 label-table"></label>
                      </th>
                      <th class="th-lg">
                        <a>Name
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th class="th-lg">
                        <a>Condition
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th class="th-lg">
                        <a>Last edited
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th></th>
                    </tr>
                  </thead>
                  <!--Table head-->

                  <!--Table body-->
                  <tbody>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox8">
                        <label for="checkbox8" class="label-table"></label>
                      </th>
                      <td>Test subscription</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>12.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox9">
                        <label for="checkbox9" class="label-table"></label>
                      </th>
                      <td>Product Hunt Visitor</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>13.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox10">
                        <label for="checkbox10" class="label-table"></label>
                      </th>
                      <td>Test subscription</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>12.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                  <!--Table body-->
                </table>
                <!--Table-->
              </div>
            </accordion-pane>
            <accordion-pane title="Folder 2" type="table" :isOpen="openPaneNum==2" @pane-clicked="handlePaneOpened(2)">
              <dropdown style="display: block" slot="title">
                <dropdown-toggle color="info" slot="toggle" class="pull-left dropdown mr-3" style="padding: 8px">
                  <fa icon="pencil" />
                </dropdown-toggle>
                <dropdown-menu color="info">
                  <dropdown-item>Add new condition</dropdown-item>
                  <dropdown-item>Rename folder</dropdown-item>
                  <dropdown-item>Delete folder</dropdown-item>
                </dropdown-menu>
              </dropdown>
              <div class="table-ui p-2 mb-3 mx-3 mb-4">
                <row>
                  <column xl="4" lg="6" md="12">
                    <mdb-select :options="[
                      {value: null, text: 'Bulk actions', disabled: true, selected: true},
                      {value: 1, text: 'Delete'},
                      {value: 2, text: 'Change folder'}
                    ]" />
                  </column>
                  <column xl="4" lg="6" md="6">
                    <mdb-select :options="[
                      {value: null, text: 'Show only', disabled: true},
                      {value: 1, text: 'All (2000)', selected: true},
                      {value: 2, text: 'Clicks (200)'},
                      {value: 3, text: 'Page (1800)'},
                      {value: 4, text: 'Scroll (200)'},
                      {value: 5, text: 'Forms (50)'},
                      {value: 6, text: 'Time (50)'},
                      {value: 7, text: 'UTM (50)'}
                    ]" />
                  </column>
                  <column xl="4" lg="6" md="6">
                    <mdb-select :options="[
                      {value: null, text: 'Filter', disabled: true, selected: true},
                      {value: 1, text: 'All (100)'},
                      {value: 2, text: 'Active (2000)'},
                      {value: 3, text: 'Inactive (1000)'}
                    ]" />
                  </column>
                </row>
              </div>
              <div class="table-responsive mx-3">
                <!--Table-->
                <table class="table table-hover mb-0">

                  <!--Table head-->
                  <thead>
                    <tr>
                      <th>
                        <input class="form-check-input" type="checkbox" id="checkbox7">
                        <label for="checkbox7" class="mr-2 label-table"></label>
                      </th>
                      <th class="th-lg">
                        <a>Name
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th class="th-lg">
                        <a>Condition
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th class="th-lg">
                        <a>Last edited
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th></th>
                    </tr>
                  </thead>
                  <!--Table head-->

                  <!--Table body-->
                  <tbody>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox8">
                        <label for="checkbox8" class="label-table"></label>
                      </th>
                      <td>Test subscription</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>12.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox9">
                        <label for="checkbox9" class="label-table"></label>
                      </th>
                      <td>Product Hunt Visitor</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>13.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox10">
                        <label for="checkbox10" class="label-table"></label>
                      </th>
                      <td>Test subscription</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>12.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                  <!--Table body-->
                </table>
                <!--Table-->
              </div>
            </accordion-pane>
            <accordion-pane title="Folder 3" type="table" :isOpen="openPaneNum==3" @pane-clicked="handlePaneOpened(3)">
              <dropdown style="display: block" slot="title">
                <dropdown-toggle color="info" slot="toggle" class="pull-left dropdown mr-3" style="padding: 8px">
                  <fa icon="pencil" />
                </dropdown-toggle>
                <dropdown-menu color="info">
                  <dropdown-item>Add new condition</dropdown-item>
                  <dropdown-item>Rename folder</dropdown-item>
                  <dropdown-item>Delete folder</dropdown-item>
                </dropdown-menu>
              </dropdown>
              <div class="table-ui p-2 mb-3 mx-3 mb-4">
                <row>
                  <column xl="4" lg="6" md="12">
                    <mdb-select :options="[
                      {value: null, text: 'Bulk actions', disabled: true, selected: true},
                      {value: 1, text: 'Delete'},
                      {value: 2, text: 'Change folder'}
                    ]" />
                  </column>
                  <column xl="4" lg="6" md="6">
                    <mdb-select :options="[
                      {value: null, text: 'Show only', disabled: true},
                      {value: 1, text: 'All (2000)', selected: true},
                      {value: 2, text: 'Clicks (200)'},
                      {value: 3, text: 'Page (1800)'},
                      {value: 4, text: 'Scroll (200)'},
                      {value: 5, text: 'Forms (50)'},
                      {value: 6, text: 'Time (50)'},
                      {value: 7, text: 'UTM (50)'}
                    ]" />
                  </column>
                  <column xl="4" lg="6" md="6">
                    <mdb-select :options="[
                      {value: null, text: 'Filter', disabled: true, selected: true},
                      {value: 1, text: 'All (100)'},
                      {value: 2, text: 'Active (2000)'},
                      {value: 3, text: 'Inactive (1000)'}
                    ]" />
                  </column>
                </row>
              </div>
              <div class="table-responsive mx-3">
                <!--Table-->
                <table class="table table-hover mb-0">

                  <!--Table head-->
                  <thead>
                    <tr>
                      <th>
                        <input class="form-check-input" type="checkbox" id="checkbox7">
                        <label for="checkbox7" class="mr-2 label-table"></label>
                      </th>
                      <th class="th-lg">
                        <a>Name
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th class="th-lg">
                        <a>Condition
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th class="th-lg">
                        <a>Last edited
                          <i class="fa fa-sort ml-1"></i>
                        </a>
                      </th>
                      <th></th>
                    </tr>
                  </thead>
                  <!--Table head-->

                  <!--Table body-->
                  <tbody>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox8">
                        <label for="checkbox8" class="label-table"></label>
                      </th>
                      <td>Test subscription</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>12.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox9">
                        <label for="checkbox9" class="label-table"></label>
                      </th>
                      <td>Product Hunt Visitor</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>13.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">
                        <input class="form-check-input" type="checkbox" id="checkbox10">
                        <label for="checkbox10" class="label-table"></label>
                      </th>
                      <td>Test subscription</td>
                      <td>
                        <code>Scroll%&lt;/code&gt;equals or greater than
                        <strong>80</strong>
                      </td>
                      <td>12.06.2017</td>
                      <td>
                        <a>
                          <i class="fa fa-info mx-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></i>
                        </a>
                        <a>
                          <i class="fa fa-pencil-square mx-1"></i>
                        </a>
                        <a>
                          <i class="fa fa-times mx-1"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                  <!--Table body-->
                </table>
                <!--Table-->
              </div>

            </accordion-pane>
        </accordion>
  

  import { Accordion } from 'mdbvue';

  export default {
    components: {
      Accodion
    },
    data() {
      return {
        elHeight: 0,
        openPaneNum: 0,
      }
    }
    methods: {
      beforeEnter(el) {
        this.elHeight = el.scrollHeight;
      },
      enter(el) {
        el.style.height = this.elHeight+'px';
      },
      beforeLeave(el) {
        el.style.height = 0;
      },
      handlePaneOpened(num) {
        if (this.openPaneNum == num) {return (this.openPaneNum = null);};
        this.openPaneNum = num;
      }
    }
  };