Collapsible panels - https://fb.com/1995384244128452

api.php

<?php

echo <<<JSON
[
  {
    "category" : "Népszerű termékek",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "http://placekitten.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://picsum.photos/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 1",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://loremflickr.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://baconmockup.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 2",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://placebeard.it/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://placebear.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 3",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://loremflickr.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://baconmockup.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 4",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://placebeard.it/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://placebear.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 3",
        "img" : "https://picsum.photos/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 5",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://loremflickr.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://baconmockup.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 6",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://placebeard.it/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://placebear.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 3",
        "img" : "https://picsum.photos/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 4",
        "img" : "https://picsum.photos/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 7",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://loremflickr.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://baconmockup.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  },
  {
    "category" : "Kategória 8",
    "products" : [
      {
        "url" : "#",
        "name" : "Terméknév 1",
        "img" : "https://placebeard.it/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "url" : "#",
        "name" : "Terméknév 2",
        "img" : "https://placebear.com/800/600",
        "desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  }
]
JSON;

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    details summary{
      background-color: #88d;
      padding: 10px;
      cursor: pointer;
      margin-bottom: 5px;
    }
    details[open] summary{ background-color: #fcd567; }
    details div.product{
      display: flex;
      flex-direction: column;
    }
    div, button{ 
      background-color: rgba(0,0,100,0.1); 
      padding: 10px; 
      width: 100%;
      box-sizing:border-box;
    } /* Egy kis reszponzivitás: */
    @media only screen and (min-width: 800px) {
      details div.product{
        flex-direction: row;
      }
      details div.product div.image{
        max-width: 25%;
      }
      body{
        max-width: 75vw;
        margin: 0 auto;
      }
    }
  </style>
</head>
<body>

<div id="categories"></div>
<button id="more" onclick="display(loaded, loaded+2)">Továbbiak megjelenítése...</button>

<script>
  var data;
  var loaded = 0;

  function closeAll(exceptThis){
      document.querySelectorAll("details").forEach(function(el){
        if( el != exceptThis)
          el.removeAttribute("open");
      });
    }

  function display(from=0, to=2){

    let collapseTemplate = `
      <details onclick="closeAll(this)">
        <summary>{{category}}</summary>
        {{product}}
      </details>
    `;
    let productTemplate = `
      <div class="product">
        <div class="image">
          <img src="{{img}}" style="width:100%;">
        </div>
        <div class="description">
          <h3>{{name}}</h3>
          <p>{{desc}}</p>
          <p><a href="{{url}}">Tovább &gt;&gt; </a></p>
        </div>
      </div>
    `;
    
    data.forEach(function(item, index){
      if (index < from || index > to) return;
      if (++loaded == data.length) document.getElementById("more").style.display = "none";
      
      var products = "";
      item.products.forEach(function(p){
        products += productTemplate.replace("{{img}}",p.img).replace("{{name}}",p.name)
                                   .replace("{{desc}}",p.desc).replace("{{url}}",p.url);
      });
      
      var ctFilled = collapseTemplate.replace("{{category}}",item.category)
                                     .replace("{{product}}",products);
      if( index == 0) 
        ctFilled = ctFilled.replace("details", "details open")

      document.getElementById("categories").insertAdjacentHTML('beforeend', ctFilled);
    });
  }

  fetch('api.php')
  .then(response => response.json())
  .then(jsondata => {data = jsondata; display(0,2); })
  .catch(error => console.error(error));
</script>
</body>
</html>