Vue.js Accordion

Installation:

npm install accordion-vue --save

How to use:

<script>
    import VueAccordion from "accordion-vue";

    export default {
        components:{
            VueAccordion
        }
    }

</script>

Example:

<template>
  <div class="center">
    <vue-accordion
            title-bg-color="#f0f0f0"
            title-color="#424874"
            title-hover-color="#6983aa80"
            accordion-width="600px"
            :datas="acardionData"
    >
    </vue-accordion>
  </div>
</template>

<script>

import VueAccordion from "./components/VueAccordion";

export default {
  name: 'App',
  data(){
    return{
      acardionData:[
        {
          title: "Lorem ipsum dolor sit amet? Lorem ipsum dolor sit amet?",
          content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore, ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?"
        },
        {
          title: "Lorem ipsum dolor?",
          content: "<p>Ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore,ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?</p>" +
                   "<p>Ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore,ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?</p>" +
                   "<p>Ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore,ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?</p>" +
                   "<p>Ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore,ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?</p>" +
                   "<p>Ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore,ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?</p>" +
                   "<button class='btn-primary'>Read me More </button>"
        },
        {
          title: "Lorem ipsum dolor sit!",
          content: "<ul>" +
                    "<li>Lorem ipsum dolor.</li>" +
                    "<li>Lorem ipsum dolor sit amet.</li>" +
                    "<li>Lorem ipsum dolor sit amet, consectetur.</li>" +
                  "</ul>"
        },
        {
          title: "Lorem ipsum dolor sit amet? Lorem ipsum dolor sit amet?",
          content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consequatur delectus dolore, ea explicabo, illo incidunt iste magni molestiae nulla rem vel voluptas voluptate! Consequatur delectus deserunt maxime nulla sint?"
        },
      ]
    }
  },
  components:{
    VueAccordion,
  }
}
</script>

<style lang="scss">

  .center{
    display: flex;
    justify-content: center;
  }

  .btn-primary{
    padding: 10px;
    background-color: #0495c9;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    float: right;

    &:hover{
      background-color: #00b3db;
    }

  }

</style>

Author

Mustafa ER | [email protected]

License

MIT