Vue

by khamer

HTML

<main>
    <h1>Lorem ipsum.</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae distinctio dolor quibusdam adipisci officia harum quae libero, dolorum ducimus, provident mollitia ipsa, sed. Sint, maiores.</p>
    
    <expandy-thing class="blue" show-label="show me">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis deserunt, harum facilis. Repudiandae aspernatur velit molestias, nostrum voluptatum ad reprehenderit nemo magni error debitis, harum quam ex. Blanditiis, culpa, cumque!</p>
    </expandy-thing>
</main>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.blue {
    background: lightblue;
}

Vue

Vue.component('expandy-thing', {
	props: {
    	showLabel: {
        	type: String,
            default: 'Read More',
        },
        hideLabel: {
        	type: String,
            default: 'Hide',
        },
    },
	template:
    	`
        <section>
        	<button @click="toggle" v-text="show ? hideLabel : showLabel"></button>
            <transition name="fade">
                <div v-if="show">
                    <slot></slot>
                </div>
            </transition>
        </section>
        `,
	data: () => ({
    	show: false,
    }),
    methods: {
    	toggle() {
        	this.show = !this.show;
        },
    },
});

new Vue({
	el: 'main'
})