{"id":15659,"date":"2026-11-01T15:04:16","date_gmt":"2026-11-01T14:04:16","guid":{"rendered":"https:\/\/pappcseperke.hu\/?p=15659"},"modified":"2026-11-01T15:05:06","modified_gmt":"2026-11-01T14:05:06","slug":"html-experiment","status":"publish","type":"post","link":"https:\/\/pappcseperke.hu\/hu\/html-experiment\/","title":{"rendered":"html experiment"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"15659\" class=\"elementor elementor-15659\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82e643f e-con-full e-flex e-con e-parent\" data-id=\"82e643f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9dc05a6 elementor-widget elementor-widget-html\" data-id=\"9dc05a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n    <!-- Main Accordion Container -->\n    <div id=\"accordion-container\"><\/div>\n\n    <script>\n        const accordionData = [\n            {\n                title: \"Avant Garde\",\n                meta: \"Fashion & Style\",\n                desc: \"Exploring the boundaries of modern silhouette and textile innovation in the heart of Paris. The new collection challenges traditional norms with bold, architectural cuts.\",\n                img: \"https:\/\/images.unsplash.com\/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=1920&q=80\"\n            },\n            {\n                title: \"Concrete Jungle\",\n                meta: \"Architecture\",\n                desc: \"Brutalist structures meeting organic urban environments. A deep dive into how monolithic concrete shapes our daily psychological landscapes in megacities.\",\n                img: \"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80\"\n            },\n            {\n                title: \"Etherealscapes\",\n                meta: \"Travel & Nature\",\n                desc: \"Journey through the mist-covered peaks and silent valleys of the Scottish Highlands, where time stands still and nature reclaims its ancient sovereignty.\",\n                img: \"https:\/\/images.unsplash.com\/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=80\"\n            },\n            {\n                title: \"The Artisan\",\n                meta: \"Culture & Craft\",\n                desc: \"Preserving century-old ceramic techniques in a modern world. Meet the master craftsmen who shape earth and fire into functional poetry.\",\n                img: \"https:\/\/images.unsplash.com\/photo-1610701596007-11502861dcfa?auto=format&fit=crop&w=1920&q=80\"\n            },\n            {\n                title: \"Minimal Living\",\n                meta: \"Interior Design\",\n                desc: \"Finding peace in negative space. How paring down your environment to the absolute essentials can lead to profound mental clarity and elevated aesthetics.\",\n                img: \"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1920&q=80\"\n            }\n        ];\n\n        \/\/ Creates spans EXACTLY ONCE\n        function createAnimatedTitle(title) {\n            return title.split('').map((char, index) => {\n                if (char === ' ') {\n                    return `<span class=\"char\" style=\"--char-index: ${index}\">&nbsp;<\/span>`;\n                }\n                return `<span class=\"char\" style=\"--char-index: ${index}\">${char}<\/span>`;\n            }).join('');\n        }\n\n        \/\/ Initialize DOM structure ONCE on load to prevent repaints\n        function initAccordion() {\n            const container = document.getElementById('accordion-container');\n            container.innerHTML = ''; \n            \n            accordionData.forEach((data, index) => {\n                const panel = document.createElement('div');\n                \/\/ Use strict .is-active toggling\n                panel.className = `panel ${index === 0 ? 'is-active' : ''}`;\n                \n                panel.innerHTML = `\n                    <div class=\"panel-bg\" style=\"background-image: url('${data.img}')\"><\/div>\n                    <div class=\"panel-overlay\"><\/div>\n                    <div class=\"panel-number cormorant-unicase-light\">0${index + 1}<\/div>\n                    <div class=\"panel-content\">\n                        <div class=\"panel-meta\">${data.meta}<\/div>\n                        <h2 class=\"panel-title cormorant-unicase-semibold\">${createAnimatedTitle(data.title)}<\/h2>\n                        <p class=\"panel-desc\">${data.desc}<\/p>\n                    <\/div>\n                `;\n\n                \/\/ Logic relies ONLY on manipulating classList, never rebuilding elements\n                panel.addEventListener('click', function() {\n                    if (this.classList.contains('is-active')) return;\n                    document.querySelectorAll('.panel').forEach(p => p.classList.remove('is-active'));\n                    this.classList.add('is-active');\n                });\n\n                container.appendChild(panel);\n            });\n        }\n\n        document.addEventListener('DOMContentLoaded', initAccordion);\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-15659","post","type-post","status-publish","format-standard","hentry","category-egyeb"],"_links":{"self":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/15659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/comments?post=15659"}],"version-history":[{"count":3,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/15659\/revisions"}],"predecessor-version":[{"id":15662,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/15659\/revisions\/15662"}],"wp:attachment":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/media?parent=15659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/categories?post=15659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/tags?post=15659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}