//the vue file
<template class="bg-white">
	<ul class="ul-special bg-white-400">
		<li v-for="(item, index) in items" class="li-special bg-white" :key="index">
			<div @click="select(index)" class="bg-white flex justify-between items-center py-5 border-t border-gray-dark">
				<button class="bg-white">
					<h4 v-html="item.title">
					</h4>
				</button>
				<button class="plus-rotate" v-bind:class="[selectedIndex === index ? 'plus-x' : '']">
					<icon icon="plus-sign"></icon>
				</button>
			</div>

			<transition
			v-on:before-enter="beforeEnter" v-on:enter="enter"
      		v-on:before-leave="beforeLeave" v-on:leave="leave">
				<article v-show="selectedIndex === index" class="transition-all overflow-hidden max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-3xl">
					<div v-html="item.copy" class="pt-5 pb-8">
					</div>
				</article>
			</transition>
		</li>
	</ul>
</template>

<script>

	import Icon from 'laravel-mix-vue-svgicon/IconComponent.vue';

	export default {
		props: {
			items: {
				default: () => ([]),
			},
		},

		data: () => ({

			selectedIndex: null,
		}),

		methods: {
			select(index) {
				if (this.selectedIndex === index) {
					this.selectedIndex = null;
				} else {
					this.selectedIndex = index;
				}
			},

			beforeEnter: function(el) {
				el.style.height = '0';
				},
				enter: function(el) {
				el.style.height = el.scrollHeight + 'px';
				},
				beforeLeave: function(el) {
				el.style.height = el.scrollHeight + 'px';
				},
				leave: function(el) {
				el.style.height = '0';
				},
		},
	}
</script>


//the blade file
<section class="text-gray-dark py-24 max-w-4xl mx-auto px-5 sm:px-12 md:px-24">
	<h2 class="mb-5  border-grey-200 pb-5">
		{!! $block['headline'] !!}
	</h2>
	<accordion :items="{{ json_encode( $block['list']) }}">

	</accordion>
</section>

//fields file
<?php

namespace App\Fields\Blocks;

use Carbon_Fields\Field;

class Accordion extends AbstractBlock {

	public $template = 'accordion';
	public $name = 'Accordion List';

	public function fields() {
		return array(

			Field::make( 'text', 'headline', __( 'List Headline' ) ),

			Field::make( 'complex', 'list', __( 'Accordion List' ) )
				->set_layout( 'tabbed-horizontal' )
				->set_min(1)
				->add_fields( array(
					Field::make( 'text', 'title', __( 'Title or Question' ) ),
					Field::make( 'rich_text', 'copy', __( 'Description or Answer' ) ),
				) )
		);
	}

	public function category() {
  		return array('lists', __( 'Custom List Modules' ), 'editor-ol');
	}

}

//the css classes
.ul-special .li-special:last-child {
	@apply border-b border-gray-dark
}

.plus-rotate {
	transform: rotate(0deg);
	transition: all .3s ease-in-out;

	&:hover {
		transform: rotate(45deg);
		transition: all .3s ease-in-out;

	}
}

.plus-x {
	@apply text-red;
	transform: rotate(45deg);
	transition: all .3s ease-in-out;
}

.transition-all {
	transition: all .3s ease-in-out;
}