<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;
    }
  };
}