<div class="container mx-auto p-2 sm:p-8" x-data="accordion()" x-init="init(5)">
<template x-if="show">
<template x-for="(item, index) in data" :key="index">
<div class="animate relative transition-all duration-200 w-full border border-gray-200 rounded-lg shadow-xl overflow-hidden my-8" :class="{'animate--full': item.details}">
<a href="more-content" class="absolute right-0 top-0 bg-white rounded-full shadow-md m-2 p-2" @click.prevent="toggleShow(index)">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 320 512" x-show="!item.details">
<path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 320 512" x-show="item.details">
<path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z" /></svg>
</a>
<div class="grid-custom h-full" :class="{'grid-custom--show': item.details}">
<div class="col-span-3 bg-gray-200 flex items-center">
<p class="text-xl truncate py-4 pl-8 pr-20" x-text="item.title"></p>
</div>
<div class="bg-gray-100 relative" x-show="item.details"><img :src="getImageUrl(index)" class="absolute inset-0 w-full h-full object-cover" alt="Image">
</div>
<div class="col-span-2 pt-4" x-show="item.details">
<p class="text-lg font-light leading-relaxed" x-text="item.body"></p>
</div>
</div>
</div>
</template>
</template>
</div>
.font-sans {
font-family: "Raleway", sans-serif;
}
html,
body {
font-size: 13px;
}
@media only screen and (min-width: 640px) {
html,
body {
font-size: 14px;
}
}
@media only screen and (min-width: 768px) {
html,
body {
font-size: 15px;
}
}
@media only screen and (min-width: 1024px) {
html,
body {
font-size: 16px;
}
}
.animate {
transition: height 200ms ease-out;
height: 62px;
}
.animate--full {
height: 250px;
}
.grid-custom {
display: grid;
grid-column-gap: 2rem;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 0px;
}
.grid-custom--show {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr;
}
function accordion() {
return {
data: [],
show: false,
init: function (count) {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((response) => {
response.slice(0, count).forEach((item) => {
this.data.push({
id: item.id,
title: item.title,
body: item.body,
details: false
});
});
this.show = true;
});
},
toggleShow(id) {
this.data[id].details = !this.data[id].details;
},
getImageUrl(id) {
return "https://picsum.photos/320/240?random=" + id;
}
};
}
This Pen doesn't use any external JavaScript resources.