{"id":8353,"date":"2022-08-09T10:46:01","date_gmt":"2022-08-09T02:46:01","guid":{"rendered":"https:\/\/www.ukm.my\/inovasi-ukm\/?page_id=8353&#038;preview_id=8353"},"modified":"2026-04-13T09:16:49","modified_gmt":"2026-04-13T01:16:49","slug":"organisational-chart2","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/inovasi-ukm\/organisational-chart2\/","title":{"rendered":"Organisational Chart"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8353\" class=\"elementor elementor-8353\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-de46ee6 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"de46ee6\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=9VAIFBs8qDY&amp;list=PLLBWNs6n7YMVH6Y1-dm7W51zKlNwMgVDs&amp;index=1&quot;,&quot;background_video_start&quot;:10,&quot;background_video_end&quot;:40}\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-background-video-container elementor-hidden-mobile\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\" role=\"presentation\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6ddade5\" data-id=\"6ddade5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bfd357 e-transform elementor-widget elementor-widget-heading\" data-id=\"8bfd357\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Organisational Chart<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2769fb9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2769fb9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c5b50d6\" data-id=\"c5b50d6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8b8d80e elementor-widget elementor-widget-spacer\" data-id=\"8b8d80e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3ef3047 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3ef3047\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f68d79b\" data-id=\"f68d79b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-fc7c5ee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fc7c5ee\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-6ec8ebd\" data-id=\"6ec8ebd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2d1ea6 elementor-widget elementor-widget-elementskit-heading\" data-id=\"a2d1ea6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-\"><div class=\"ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider elementskit-style-long\"><div class=\"elementskit-border-divider elementskit-style-long\"><\/div><\/div><h2 class=\"ekit-heading--title elementskit-section-title \">Organisational <span> Chart <\/span><\/h2><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-3bdf410 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"3bdf410\" 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<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\n\r\n    :root {\r\n        --primary-color: #22A39F;\r\n        --secondary-color: #1a817d;\r\n        --card-bg: #ffffff;\r\n        --text-dark: #1e293b;\r\n        --text-muted: #64748b;\r\n        --line-color: #94a3b8;\r\n        --shadow-idle: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n        --shadow-hover: 0 12px 25px rgba(34, 163, 159, 0.15);\r\n        --border-radius: 12px;\r\n    }\r\n\r\n    #inovasi-org-chart {\r\n        font-family: 'Poppins', sans-serif;\r\n        background-color: transparent;\r\n        padding: 20px 0; \r\n        width: 100%;\r\n        overflow: hidden; \r\n        color: var(--text-dark);\r\n        box-sizing: border-box;\r\n        border: none;\r\n    }\r\n\r\n    \/* Control Button Container *\/\r\n    .controls-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        margin-bottom: 30px;\r\n        position: relative;\r\n        z-index: 10;\r\n    }\r\n\r\n    .toggle-all-btn {\r\n        background-color: var(--primary-color);\r\n        color: white;\r\n        border: none;\r\n        padding: 12px 28px;\r\n        border-radius: 50px;\r\n        font-family: 'Poppins', sans-serif;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        box-shadow: 0 4px 12px rgba(34, 163, 159, 0.25);\r\n        transition: all 0.3s ease;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .toggle-all-btn:hover {\r\n        background-color: var(--secondary-color);\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 6px 15px rgba(34, 163, 159, 0.35);\r\n    }\r\n\r\n    .toggle-all-btn svg {\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    \/* Base Tree Structure *\/\r\n    .org-tree {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        width: 100%;\r\n        max-width: 1140px; \r\n        margin: 0 auto;\r\n        padding-bottom: 20px;\r\n    }\r\n\r\n    .org-level {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n\r\n    \/* Boss & Secretary Group using Grid for exact center *\/\r\n    .boss-wrapper {\r\n        display: grid;\r\n        grid-template-columns: 1fr auto 1fr;\r\n        align-items: center;\r\n        width: 100%;\r\n        max-width: 1000px; \r\n    }\r\n\r\n    \/* Secretary Wrapper *\/\r\n    .secretary-wrapper {\r\n        justify-self: end;\r\n        padding-right: 30px; \r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    \/* Horizontal line from Secretary to Boss *\/\r\n    .secretary-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        right: 0;\r\n        top: 50%;\r\n        width: 30px;\r\n        height: 2px;\r\n        background-color: var(--line-color);\r\n        z-index: 1;\r\n    }\r\n\r\n    .boss-card-container {\r\n        grid-column: 2; \r\n        z-index: 2;\r\n    }\r\n\r\n    \/* Base Card *\/\r\n    .org-card {\r\n        background: var(--card-bg);\r\n        border: 1px solid #e2e8f0;\r\n        border-radius: var(--border-radius);\r\n        padding: 24px;\r\n        text-align: center;\r\n        box-shadow: var(--shadow-idle);\r\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n        z-index: 2;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    \/* Content Height Fixer (For absolute uniformity) *\/\r\n    .card-info {\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: 100%;\r\n        flex-grow: 0;\r\n    }\r\n\r\n    \/* FIXED heights to guarantee uniformity *\/\r\n    .boss-card .card-info { height: 80px; }\r\n    .secretary .card-info { height: 60px; }\r\n    .interactive .card-info { height: 130px; } \r\n\r\n    \/* Main Cards (Director & Deputy) *\/\r\n    .org-card.boss-card {\r\n        width: 300px;\r\n        border-top: 5px solid var(--primary-color);\r\n    }\r\n\r\n    \/* Secretary Card *\/\r\n    .org-card.secretary {\r\n        width: 220px;\r\n        padding: 16px;\r\n        border-top: 4px solid var(--text-muted);\r\n        background: #ffffff;\r\n    }\r\n\r\n    \/* Bottom Cards (Units) that are clickable *\/\r\n    .org-card.interactive {\r\n        cursor: pointer;\r\n        width: 100%; \r\n        border-top: 4px solid var(--primary-color);\r\n        min-height: 260px; \r\n    }\r\n\r\n    .org-card.interactive:hover, .org-card.active {\r\n        transform: translateY(-5px);\r\n        box-shadow: var(--shadow-hover);\r\n        border-color: var(--primary-color);\r\n    }\r\n\r\n    \/* Text Typography *\/\r\n    .card-role {\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.2px;\r\n        margin-bottom: 10px;\r\n        display: block;\r\n        color: var(--primary-color);\r\n    }\r\n\r\n    .secretary .card-role {\r\n        color: var(--text-muted);\r\n    }\r\n\r\n    .card-name {\r\n        font-size: 17px;\r\n        font-weight: 600;\r\n        line-height: 1.4;\r\n        margin: 0;\r\n        color: var(--text-dark);\r\n    }\r\n\r\n    .secretary .card-name {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .card-note {\r\n        font-size: 12px;\r\n        color: var(--text-muted);\r\n        margin-top: 6px;\r\n        display: block;\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* Interactive Hint Button (View Staff) *\/\r\n    .interactive-hint {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 6px;\r\n        font-size: 12px;\r\n        color: var(--primary-color);\r\n        margin-top: auto; \r\n        font-weight: 600;\r\n        background: #f0fdfa;\r\n        padding: 10px;\r\n        border-radius: 8px;\r\n        transition: all 0.3s ease;\r\n        width: 100%; \r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .org-card.interactive:hover .interactive-hint, .org-card.active .interactive-hint {\r\n        background: var(--primary-color);\r\n        color: white;\r\n    }\r\n\r\n    .interactive-hint svg {\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .org-card.active .interactive-hint svg {\r\n        transform: rotate(180deg);\r\n    }\r\n\r\n    \/* Main Vertical Lines *\/\r\n    .vertical-line {\r\n        width: 2px;\r\n        height: 35px;\r\n        background-color: var(--line-color);\r\n    }\r\n\r\n    \/* 4 Units Container *\/\r\n    .children-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        flex-wrap: wrap; \r\n        gap: 20px;\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n\r\n    .child-node {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        position: relative;\r\n        width: 260px; \r\n    }\r\n\r\n    \/* Accordion Details (Unit Staff) *\/\r\n    .unit-details {\r\n        max-height: 0;\r\n        overflow: hidden;\r\n        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;\r\n        text-align: left;\r\n        background: #f8fafc;\r\n        border-radius: 8px;\r\n        margin-top: 0;\r\n        padding: 0 15px; \r\n        opacity: 0;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .org-card.active .unit-details {\r\n        max-height: 1000px;\r\n        margin-top: 20px;\r\n        padding: 20px 15px;\r\n        border: 1px solid #e2e8f0;\r\n        opacity: 1;\r\n    }\r\n\r\n    .staff-group {\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .staff-group:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .staff-group-title {\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n        color: var(--primary-color);\r\n        border-bottom: 2px solid #e2e8f0;\r\n        padding-bottom: 5px;\r\n        margin-bottom: 10px;\r\n        display: block;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .staff-list {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin: 0;\r\n    }\r\n\r\n    .staff-list li {\r\n        font-size: 13.5px;\r\n        color: var(--text-dark);\r\n        padding: 4px 0;\r\n        display: flex;\r\n        align-items: center;\r\n        font-weight: 400;\r\n    }\r\n\r\n    .staff-list li::before {\r\n        content: '';\r\n        display: inline-block;\r\n        width: 6px;\r\n        height: 6px;\r\n        background-color: var(--primary-color);\r\n        border-radius: 50%;\r\n        margin-right: 10px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* Mobile Scroll Hint *\/\r\n    .scroll-hint {\r\n        display: none;\r\n        text-align: center;\r\n        font-size: 12px;\r\n        color: var(--text-muted);\r\n        margin-bottom: 20px;\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* ========================================================\r\n       MEDIA QUERIES (RESPONSIVE SYSTEM) \r\n       ======================================================== *\/\r\n\r\n    \/* 1. Desktop \/ Large Screens *\/\r\n    @media (min-width: 1150px) {\r\n        .children-container {\r\n            width: 1100px; \r\n            padding-top: 35px;\r\n            align-items: flex-start;\r\n        }\r\n        \/* Top horizontal connection line *\/\r\n        .children-container::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 130px; \r\n            right: 130px; \r\n            height: 2px;\r\n            background-color: var(--line-color);\r\n        }\r\n        \/* Vertical dropping lines to units *\/\r\n        .child-node::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -35px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 2px;\r\n            height: 35px;\r\n            background-color: var(--line-color);\r\n        }\r\n    }\r\n\r\n    \/* 2. Tablets (Medium Screens) *\/\r\n    @media (max-width: 1149px) {\r\n        .children-container {\r\n            padding-top: 10px; \r\n            gap: 25px;\r\n            max-width: 600px; \/* Forces neat 2x2 grid *\/\r\n            margin: 0 auto;\r\n        }\r\n    }\r\n\r\n    \/* 3. Mobile \/ Small Screens (< 850px) *\/\r\n    @media (max-width: 850px) {\r\n        .scroll-hint {\r\n            display: block;\r\n        }\r\n\r\n        .boss-wrapper {\r\n            grid-template-columns: 1fr;\r\n            gap: 15px;\r\n            justify-items: center;\r\n        }\r\n        \r\n        .boss-card-container {\r\n            grid-column: 1;\r\n            order: 1;\r\n        }\r\n        \r\n        .secretary-wrapper {\r\n            justify-self: center;\r\n            padding-right: 0;\r\n            order: 2; \r\n        }\r\n\r\n        .secretary-wrapper::after {\r\n            width: 2px;\r\n            height: 15px;\r\n            right: 50%;\r\n            bottom: 100%;\r\n            top: auto;\r\n            transform: translateX(50%);\r\n        }\r\n\r\n        .vertical-line {\r\n            height: 25px;\r\n        }\r\n\r\n        .child-node {\r\n            width: 100%;\r\n            max-width: 320px; \r\n        }\r\n\r\n        .org-card.boss-card, \r\n        .org-card.secretary {\r\n            width: 100%;\r\n            max-width: 320px;\r\n        }\r\n\r\n        .children-container {\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"inovasi-org-chart\">\r\n    \r\n    <!-- Show All Button -->\r\n    <div class=\"controls-container\">\r\n        <button id=\"toggle-all-btn\" class=\"toggle-all-btn\" onclick=\"toggleAllCards()\">\r\n            <span id=\"toggle-all-text\">Show All Staff<\/span>\r\n            <svg id=\"toggle-all-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <p class=\"scroll-hint\">Swipe up\/down to view the full chart<\/p>\r\n\r\n    <div class=\"org-tree\">\r\n        \r\n        <!-- LEVEL 1: DIRECTOR -->\r\n        <div class=\"org-level\">\r\n            <div class=\"boss-wrapper\">\r\n                <!-- Secretary -->\r\n                <div class=\"secretary-wrapper\">\r\n                    <div class=\"org-card secretary\">\r\n                        <div class=\"card-info\">\r\n                            <span class=\"card-role\">Director's Secretary<\/span>\r\n                            <h3 class=\"card-name\">Alizawaty Athari<\/h3>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Director -->\r\n                <div class=\"boss-card-container\">\r\n                    <div class=\"org-card boss-card\">\r\n                        <div class=\"card-info\">\r\n                            <span class=\"card-role\">Director<\/span>\r\n                            <h3 class=\"card-name\">Prof. Dr. Sawal Hamid Md Ali<\/h3>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Spacer -->\r\n                <div><\/div> \r\n            <\/div>\r\n            <div class=\"vertical-line\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- LEVEL 2: DEPUTY DIRECTOR -->\r\n        <div class=\"org-level\">\r\n            <div class=\"boss-wrapper\">\r\n                <!-- Secretary -->\r\n                <div class=\"secretary-wrapper\">\r\n                    <div class=\"org-card secretary\">\r\n                        <div class=\"card-info\">\r\n                            <span class=\"card-role\">Deputy Director's Secretary<\/span>\r\n                            <h3 class=\"card-name\">Nurul Aien Hashim<\/h3>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Deputy Director -->\r\n                <div class=\"boss-card-container\">\r\n                    <div class=\"org-card boss-card\">\r\n                        <div class=\"card-info\">\r\n                            <span class=\"card-role\">Deputy Director<\/span>\r\n                            <h3 class=\"card-name\">Prof. Dr. Mohd Fauzi Mh Busra<\/h3>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Spacer -->\r\n                <div><\/div>\r\n            <\/div>\r\n            <div class=\"vertical-line\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- LEVEL 3: 4 MAIN UNITS -->\r\n        <div class=\"children-container\">\r\n            \r\n            <!-- CORPORATE MANAGEMENT UNIT -->\r\n            <div class=\"child-node\">\r\n                <div class=\"org-card interactive\" onclick=\"toggleOrgCard(this)\">\r\n                    <div class=\"card-info\">\r\n                        <span class=\"card-role\">Corporate Management Unit<\/span>\r\n                        <h3 class=\"card-name\">Arzana Zakaria<\/h3>\r\n                        <span class=\"card-note\">(Head of Administration)<\/span>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"interactive-hint\">\r\n                        <span class=\"card-hint-text\">View Staff<\/span>\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n                    <\/div>\r\n\r\n                    <div class=\"unit-details\">\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Administration \/ Marketing<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Najwa Mohd Azman<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Media \/ ICT<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Munqiz Zuhdi Muhamad Zahid<\/li>\r\n                                <li>Haikal Azhari Haliza<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Finance<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Noor Hezry Muhamad Nodin<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Support<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Mohamad Noorfadzreen Sumiran<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- INTELLECTUAL PROPERTY UNIT -->\r\n            <div class=\"child-node\">\r\n                <div class=\"org-card interactive\" onclick=\"toggleOrgCard(this)\">\r\n                    <div class=\"card-info\">\r\n                        <span class=\"card-role\">Intellectual Property Unit<\/span>\r\n                        <h3 class=\"card-name\">Nurul Syafinaz Md Katan<\/h3>\r\n                        <span class=\"card-note\">(Coordinator)<\/span>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"interactive-hint\">\r\n                        <span class=\"card-hint-text\">View Staff<\/span>\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n                    <\/div>\r\n\r\n                    <div class=\"unit-details\">\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Staff<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Nurmaziah Omar<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Support<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Nur Hafizah Che Saad<\/li>\r\n                                <li>Nurul Aien Hashim<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- TRANSLATION UNIT -->\r\n            <div class=\"child-node\">\r\n                <div class=\"org-card interactive\" onclick=\"toggleOrgCard(this)\">\r\n                    <div class=\"card-info\">\r\n                        <span class=\"card-role\">Translation Unit<\/span>\r\n                        <h3 class=\"card-name\">Izzaidah Ishak<\/h3>\r\n                        <span class=\"card-note\">(Coordinator)<\/span>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"interactive-hint\">\r\n                        <span class=\"card-hint-text\">View Staff<\/span>\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n                    <\/div>\r\n\r\n                    <div class=\"unit-details\">\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Staff<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Mohamad Fikri Rosli<\/li>\r\n                                <li>Alissyazmim Abd Halim<\/li>\r\n                                <li>Firdaus Banhawi<\/li>\r\n                                <li>Ahmad Radzi Amirruddin<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Support<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Alizawaty Athari<\/li>\r\n                                <li>Normasita Mohamad<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- COMMERCIALISATION UNIT -->\r\n            <div class=\"child-node\">\r\n                <div class=\"org-card interactive\" onclick=\"toggleOrgCard(this)\">\r\n                    <div class=\"card-info\">\r\n                        <span class=\"card-role\">Commercialisation Unit<\/span>\r\n                        <h3 class=\"card-name\">Dr. Mohd Fauzi<\/h3>\r\n                        <span class=\"card-note\">(Deputy Director)<\/span>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"interactive-hint\">\r\n                        <span class=\"card-hint-text\">View Staff<\/span>\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n                    <\/div>\r\n\r\n                    <div class=\"unit-details\">\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Staff<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Mohamad Mustaqim Rosli<\/li>\r\n                                <li>Mohd Firdaus Md Sahat<\/li>\r\n                                <li>Nur Suhana Abd Gani<\/li>\r\n                                <li>Nur Fairuz Mat Yasin<\/li>\r\n                                <li>Muhammad Amirul Azri Che Rahim<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Finance<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Munqiz Zuhdi Muhamad Zahid<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Legal<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Shazira Fatihin Shukor<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                        <div class=\"staff-group\">\r\n                            <span class=\"staff-group-title\">Support<\/span>\r\n                            <ul class=\"staff-list\">\r\n                                <li>Normasita Mohamad<\/li>\r\n                            <\/ul>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div> <!-- End Children Container -->\r\n    <\/div> <!-- End Org Tree -->\r\n<\/div>\r\n\r\n<script>\r\n    let isAllExpanded = false;\r\n\r\n    \/\/ Helper function to update the global button UI\r\n    function updateButtonUI() {\r\n        const btnSpan = document.getElementById('toggle-all-text');\r\n        const btnIcon = document.getElementById('toggle-all-icon');\r\n        \r\n        if (isAllExpanded) {\r\n            btnSpan.textContent = 'Hide All Staff';\r\n            btnIcon.style.transform = 'rotate(180deg)';\r\n        } else {\r\n            btnSpan.textContent = 'Show All Staff';\r\n            btnIcon.style.transform = 'rotate(0deg)';\r\n        }\r\n    }\r\n\r\n    \/\/ Function triggered by the global \"Show All\" button\r\n    function toggleAllCards() {\r\n        const cards = document.querySelectorAll('.org-card.interactive');\r\n        isAllExpanded = !isAllExpanded;\r\n        \r\n        cards.forEach(card => {\r\n            if (isAllExpanded) {\r\n                card.classList.add('active');\r\n            } else {\r\n                card.classList.remove('active');\r\n            }\r\n        });\r\n\r\n        updateButtonUI();\r\n    }\r\n\r\n    \/\/ Function triggered when clicking an individual card\r\n    function toggleOrgCard(cardElement) {\r\n        const isActive = cardElement.classList.contains('active');\r\n        const cards = document.querySelectorAll('.org-card.interactive');\r\n        \r\n        \/\/ Reset global state because user is interacting manually\r\n        isAllExpanded = false;\r\n        updateButtonUI();\r\n        \r\n        \/\/ Close all cards for a neat layout\r\n        cards.forEach(card => {\r\n            card.classList.remove('active');\r\n        });\r\n\r\n        \/\/ Open the clicked card\r\n        if (!isActive) {\r\n            cardElement.classList.add('active');\r\n            \r\n            \/\/ Auto-scroll logic \r\n            setTimeout(() => {\r\n                const rect = cardElement.getBoundingClientRect();\r\n                const isOutOfView = (rect.bottom > window.innerHeight);\r\n                \r\n                if (isOutOfView) {\r\n                    cardElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n                }\r\n            }, 350); \r\n        }\r\n    }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Organisational Chart Organisational Chart Show All Staff Swipe up\/down to view the full chart Director&#8217;s Secretary Alizawaty Athari Director Prof. Dr. Sawal Hamid Md Ali<a class=\"ut-readmore\" href=\"https:\/\/www.ukm.my\/inovasi-ukm\/organisational-chart2\/\"> &#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8353","page","type-page","status-publish","hentry"],"aioseo_notices":[],"publishpress_future_action":{"enabled":false,"date":"2026-05-05 16:17:15","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"language","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"pik","author_link":"https:\/\/www.ukm.my\/inovasi-ukm\/author\/pik\/"},"rttpg_comment":0,"rttpg_category":" <a href=\"https:\/\/www.ukm.my\/inovasi-ukm\/\" rel=\"tag\">English<\/a>","rttpg_excerpt":"Organisational Chart Organisational Chart Show All Staff Swipe up\/down to view the full chart Director's Secretary Alizawaty Athari Director Prof. Dr. Sawal Hamid Md Ali ...","_links":{"self":[{"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/pages\/8353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/comments?post=8353"}],"version-history":[{"count":62,"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/pages\/8353\/revisions"}],"predecessor-version":[{"id":14699,"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/pages\/8353\/revisions\/14699"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/inovasi-ukm\/wp-json\/wp\/v2\/media?parent=8353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}