{"version":"1.0.4","templatekey":"icontoggle","name":"Toggle with icon","instructions":"<p>Enter content to toggle in between the tags in the page</p>","content":"<button class=\"p-0 pb-2 d-inline-flex align-items-center gap-2 border-0 bg-transparent shadow-none\"\n        id=\"{{AUTOID}}\"\n        aria-expanded=\"false\"\n        aria-controls=\"{{AUTOID}}_target\">\n    <span class=\"fa fa-2x fa-toggle-off togglebutton\" aria-hidden=\"true\"></span>\n    <span class=\"toggletext\">{{closedtext}}</span>\n</button>\n<div id=\"{{AUTOID}}_target\" class=\"icontoggle-target {{AUTOID}}_target\" style=\"height:0;overflow:hidden\">","templateend":"</div>","variabledefaults":"closedtext=\"Show\",opentext=\"Hide\"","jscontent":"require(['core/log'], function(log) {\n    const trigger = document.getElementById('{{AUTOID}}');\n    const target = document.getElementById('{{AUTOID}}_target');\n    const button = trigger.querySelector('.togglebutton');\n    const text = trigger.querySelector('.toggletext');\n    let open = false;\n\n    trigger.addEventListener('click', function() {\n        open = !open;\n\n        if (open) {\n            target.style.height = target.scrollHeight + 'px';\n            target.addEventListener('transitionend', function() {\n                target.style.height = 'auto';   // let it flow naturally when open\n            }, {once: true});\n        } else {\n            target.style.height = target.scrollHeight + 'px'; // from auto back to a number\n            target.offsetHeight;                // force reflow\n            target.style.height = '0';\n        }\n\n        button.classList.toggle('fa-toggle-off', !open);\n        button.classList.toggle('fa-toggle-on', open);\n        text.textContent = open ? \"{{opentext}}\" : \"{{closedtext}}\";\n        trigger.setAttribute('aria-expanded', open);\n    });\n});","importcss":"","customcss":"","dataset":"","datasetvars":"","allowedcontexts":"","allowedcontextids":""}