{"id":21,"date":"2026-02-05T13:38:32","date_gmt":"2026-02-05T13:38:32","guid":{"rendered":"https:\/\/test.turtlemedia.co.uk\/?page_id=21"},"modified":"2026-02-05T13:57:21","modified_gmt":"2026-02-05T13:57:21","slug":"test-2","status":"publish","type":"page","link":"https:\/\/test.turtlemedia.co.uk\/index.php\/test-2\/","title":{"rendered":"Test 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f22e47f e-flex e-con-boxed e-con e-parent\" data-id=\"f22e47f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f122558 elementor-widget elementor-widget-heading\" data-id=\"f122558\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Coding Test<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-142987d e-flex e-con-boxed e-con e-parent\" data-id=\"142987d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-847fac5 elementor-widget elementor-widget-text-editor\" data-id=\"847fac5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1994\" data-end=\"2159\">Below is a widget that contains some code. It should show a tabbed switcher on desktop (900px and up). It currently fails on desktop. Fix it with minimal changes so:<\/p><ul data-start=\"2160\" data-end=\"2302\"><li data-start=\"2160\" data-end=\"2229\"><p data-start=\"2162\" data-end=\"2229\">Desktop: clicking tabs swaps content, one panel visible by default.<\/p><\/li><li data-start=\"2230\" data-end=\"2280\"><p data-start=\"2232\" data-end=\"2280\">Mobile: content stays visible (stacked is fine).<\/p><\/li><li data-start=\"2281\" data-end=\"2302\"><p data-start=\"2283\" data-end=\"2302\">No console errors.<\/p><\/li><\/ul><p>Provide a fix with minimal changes.<br \/><br \/>To see how it should look, when in editor mode, change the device at the top to mobile or tablet.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcba1da elementor-widget elementor-widget-html\" data-id=\"dcba1da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .ssw{border:1px solid #e5e5e5;border-radius:10px;padding:14px}\r\n  .ssw__tabs{display:none;gap:8px;margin-bottom:12px;flex-wrap:wrap}\r\n  .ssw__tab{border:1px solid #ddd;border-radius:999px;padding:8px 12px;background:#fff;cursor:pointer}\r\n  .ssw__tab.is-active{border-color:#111}\r\n  .ssw__panel{padding:10px 0}\r\n  @media (min-width: 900px){\r\n    .ssw__tabs{display:flex}\r\n    .ssw__panel{display:none}\r\n    .ssw__panel.is-active{display:block}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"ssw\" data-ssw>\r\n  <div class=\"ssw__tabs\" role=\"tablist\" aria-label=\"Services switcher\">\r\n    <button class=\"ssw__tab\" type=\"button\" data-panel=\"drone\" role=\"tab\">Drone surveys<\/button>\r\n    <button class=\"ssw__tab\" type=\"button\" data-panel=\"roof\" role=\"tab\">Roofing<\/button>\r\n    <button class=\"ssw__tab\" type=\"button\" data-panel=\"events\" role=\"tab\">Events hire<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"ssw__panel\" data-panel=\"drone\" role=\"tabpanel\">\r\n    <strong>Drone surveys<\/strong><br>\r\n    Fast visuals, repeatable reports, safer access planning.\r\n  <\/div>\r\n\r\n  <div class=\"ssw__panel\" data-panel=\"roof\" role=\"tabpanel\">\r\n    <strong>Roofing<\/strong><br>\r\n    Repairs, replacements, and inspections for domestic and commercial.\r\n  <\/div>\r\n\r\n  <div class=\"ssw__panel\" data-panel=\"events\" role=\"tabpanel\">\r\n    <strong>Events hire<\/strong><br>\r\n    Photo booths, dance floors, and premium party add-ons.\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(() => {\r\n  document.querySelectorAll('[data-ssw]').forEach((root) => {\r\n    const mq = window.matchMedia('(min-width: 900)'); \r\n    const tabs = [...root.querySelectorAll('.ssw__tab')];\r\n    const panels = [...root.querySelectorAll('.ssw__panel')];\r\n    const tabWrap = root.querySelector('.ssw__tabs');\r\n\r\n    function show(panelName){\r\n      tabs.forEach(t => t.classList.toggle('is-active', t.dataset.panel === panelName));\r\n      panels.forEach(p => p.classList.toggle('is-active', p.dataset.panel === panelName));\r\n    }\r\n\r\n    tabWrap.addEventListener('click', (e) => {\r\n      const btn = e.target.closest('.ssw__tab');\r\n      if (!btn) return;\r\n      show(btn.dataset.panelId); \r\n    });\r\n\r\n    if (mq.matches && tabs[0]) show(tabs[0].dataset.panel);\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Coding Test Below is a widget that contains some code. It should show a tabbed switcher on desktop (900px and up). It currently fails on desktop. Fix it with minimal changes so: Desktop: clicking tabs swaps content, one panel visible by default. Mobile: content stays visible (stacked is fine). No console errors. Provide a fix [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":4,"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/test.turtlemedia.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}