WIMTACH Success Stories<\/title>\n \n <style>\n *, *::before, *::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n \n .wp-block-post-title{\n display:none;\n } \n\n #category-buttons {\n display: flex;\n }\n\n #category-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 2px;\n width: calc((315px * 1) + (0rem * 1));\n border-radius: 5px;\n margin: 2rem auto;\n }\n\n #more-button {\n margin-left: auto;\n }\n \n #category-buttons button,\n #more-button button{\n padding: 10px 20px;\n font-size: 1rem;\n background-color: white;\n border: 1px solid #D2DE38;\n cursor: pointer;\n border-radius: 5px;\n transition: background-color 0.3s, box-shadow 0.3s;\n }\n \n #category-buttons button.active,\n #category-program button.active,\n #more-button button.active{\n background-color: #D2DE38 ;\n color: black;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n position: relative;\n }\n \n #category-buttons button:hover,\n #category-program button:hover{\n background-color: #D2DE38 ; \n }\n\n #category-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, 315px);\n gap: 1.5rem;\n justify-content: center;\n margin: 0 auto 4rem auto;\n width: 95%;\n }\n \n \/*More Program Button*\/\n #category-program{\n position: relative;\n padding: 10px 20px;\n cursor: pointer;\n margin-left: auto;\n }\n\n\/* Add the icon beside More button *\/\n #category-program::after {\n content: url('https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/more-arrow.png');\n display: inline-block;\n margin-left: 1rem;\n }\n\n #category-program:hover::after {\n content: url('https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/more-arrow-hover.png');\n }\n \n \/* Dropdown content (hidden by default) *\/\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: #fafafa;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 99999;\n margin-top: 1rem;\n border-radius: 5px;\n width: 326px;\n height: 274px;\n right: 0;\n left: auto;\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: #D2D2D2 #fafafa;\n }\n \/* Links inside the dropdown *\/\n .dropdown-content a {\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n text-align:left;\n }\n .dropdown-content a:hover {\n background-color: #e4e4e4;\n text-decoration: none;\n }\n \n button.btnCategoryProgram {\n width: auto !important;\n }\n button#category-program {\n display: block !important;\n }\n \n .post-item {\n border: 1px solid #D2DE38;\n border-radius: 10px;\n height: 320px; \n width: 320px; \n box-sizing: border-box;\n transition: box-shadow 0.3s;\n display: block;\n cursor: pointer;\n }\n \n .post-item:hover {\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n }\n \n .post-item img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 10px;\n }\n \n .post-item-content {\n background-color: #D2DE38;\n height: auto; \n width: 90%;\n position: relative;\n bottom: 30%; \n margin: 0 auto;\n padding: 0.5rem;\n }\n\n \/* Restrict h2 to 2 lines and add ellipses *\/\n .post-item h2 {\n font-size: 1.125rem;\n color: #303030;\n font-weight: 700;\n margin: 0 !important;\n display: -webkit-box;\n -webkit-line-clamp: 2; \/* Limit text to 2 lines *\/\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .post-item p {\n font-size: 1.25rem;;\n color: #303030;\n font-weight: 600;\n margin: 0 !important;\n }\n \n #category-load-more .load-more {\n display: block !important;\n margin: 20px auto;\n font-size: 1.5rem;\n font-weight: 300;\n padding: 0.25rem 2.25rem;\n margin: 3rem auto;\n background: #fafafa;\n border: 2px solid #D9D9D9;\n border-radius: 5px;\n color: #303030;\n cursor: pointer;\n transition: opacity 0.3s;\n } \n #category-load-more .load-more:hover {\n opacity: 0.9;\n } \n .entry-content .wp-block-heading .ticss-fa6ae186 > div.student-name{\n padding: 0 !important;\n }\n\n .margin-top-right{\n margin: 1rem 0rem !important;\n }\n \n @media(min-width: 694px) {\n #category-buttons {\n width: calc((315px * 2) + (1.5rem * 1));\n }\n }\n \n @media(min-width: 1050px) {\n #category-buttons {\n width: calc((315px * 3) + (1.5rem * 2));\n }\n }\n\n @media(min-width: 1440px) {\n #category-buttons {\n width: calc((315px * 4) + (1.5rem * 3));\n }\n }\n \n @media (min-width: 1200px) {\n #category-content {\n padding: 0rem 1rem;\n }\n }\n \n @media (min-width: 1278px) {\n .dropdown-content {\n right: 0;\n left: auto;\n }\n \n #category-content {\n padding: 0rem 1rem;\n }\n }\n <\/style>\n <?php wp_head(); ?>\n<\/head>\n<body>\n <div class=\"main-container\">\n <div id=\"category-buttons\"> \n <\/div>\n <div id=\"more-button\" class=\"\"> \n <\/div>\n <div id=\"category-content\"> \n <\/div>\n <div id=\"category-load-more\"> \n <button id='load-more-btn' class='load-more'>Load More<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n <script> \n \n jQuery(document).ready(function($) {\n \n loadCategoryButtons(); \n \/\/ paragraphMarginTopRight();\n \n \/\/ Function to load category buttons\n function loadCategoryButtons() {\n $.ajax({\n type: 'POST',\n url: ajax_obj.ajax_url,\n data: {\n action: 'auto_load_successstories_button' \n },\n success: function(response) {\n \n $('#category-buttons').html(response); \n $('#category-buttons button').addClass(\"tabs\");\n $('#category-buttons button:gt(4)').removeClass('tabs').addClass('program').css('display','none'); \/\/removes the buttons greater than 4 \n $('#category-buttons ').append(\"<button id='category-program' style='display:block' >More<\/button>\");\n \n loadCategoryProgram(response); \n var initialCategory = \"SuccessStories\";\n if (initialCategory) {\n loadCategoryPosts(initialCategory); \n $('#category-buttons button').removeClass('active');\n $('#category-buttons button[data-category=\"' + initialCategory + '\"]').addClass('active');\n } else { \n loadCategoryPosts('SuccessStories');\n }\n }\n });\n } \n \/\/end of function loadCategoryButtons\n \n \/\/ Function to load posts by category\n function loadCategoryPosts(category) { \n $.ajax({\n type: 'POST',\n url: ajax_obj.ajax_url,\n data: {\n action: 'load_category_posts',\n category: category\n },\n success: function(response) { \n $('#category-content').html(response);\n $('#category-content .post-item:gt(11)').hide();\n $('#category-buttons button:gt(4)').hide();\n if($('#category-content .post-item').length > 3){\n $('#category-load-more').css('display','block');\n } else {\n $('#category-load-more').css('display','none');\n }\n \n $('#load-more-btn').on('click', function(event) { \n if(event){\n $('#category-content .post-item').css('display','block'); \n $('#category-load-more').css('display','none');\n }else{\n $('#category-content .post-item:gt(3)').hide();\n $('#category-load-more').css('display','block');\n } \n });\n \n $('.post-item').each(function() {\n const $item = $(this);\n const titleElement = $item.find('h2');\n \n if (titleElement.length) {\n const text = titleElement.text(); \n if (text.indexOf(':') !== -1) {\n processContent(text, ':', $item);\n } \n else if (text.indexOf('with') !== -1) {\n processContent(text, 'with', $item);\n } else {\n console.log('test');\n processContent(text, null, $item);\n } \n } else{\n console.log('nothing',titleElement);\n }\n });\n \n function processContent(text, separator, $item) {\n const splitH2 = text.split(separator);\n let postItemContent = $item.find('.post-item-content');\n \n if (!postItemContent.length) {\n postItemContent = $('<div>').addClass('post-item-content');\n $item.append(postItemContent);\n }\n \n \/\/ Process title: Split words and capitalize second word\n const titleWords = splitH2[0].trim().split(' ');\n if (titleWords.length > 1) {\n titleWords[1] = titleWords[1].toUpperCase();\n }\n const formattedTitle = titleWords.slice(0, 6).join(' ') + (titleWords.length > 6 ? '...' : '');;\n \n \/\/ Process description: Limit to 4 words and add ellipsis\n const description = splitH2[1]?.trim() || '';\n const words = description.split(' ');\n const limitedDescription = words.slice(0, 4).join(' ') + (words.length > 4 ? '...' : '');\n \n postItemContent.html(`\n <h2>${formattedTitle}<\/h2>\n <h2>${limitedDescription}<\/h2>\n <h2><\/h2>\n `);\n } \n }\n });\n }\n \/\/end of function loadCategoryPosts\n \n \/\/ Function to get URL parameter\n function getUrlParameter(name) { \n name = name.replace(\/[\\[]\/, '\\\\[').replace(\/[\\]]\/, '\\\\]'); \n var regex = new RegExp('[\\\\?&]' + name + '=([^&#]*)'); \n var results = regex.exec(location.search); \n return results === null ? '' : decodeURIComponent(results[1].replace(\/\\+\/g, ' ')); \n }\n \n \/\/start of loadCategoryProgram\n function loadCategoryProgram(response) \n { \n $(\"#category-program\").css('display','block');\n $(\"#category-program\").append(\"<div class='dropdown-content'>\"); \n const buttons = $('.program'); \n buttons.each(function(index) { \n const url = $(this).data('category'); \n const text = $(this).text(); \n const newLink = $('<a><\/a>') \n .attr('data-category', url) \n .text(text) \n .addClass('content-program'); \n $('.dropdown-content').append(newLink);\n });\n \n const dropdownBtn = document.querySelector(\"#category-program\");\n const dropdownContent = document.querySelector(\".dropdown-content\");\n \/\/ const tabs = document.querySelector(\".tabs\");\n\n if($(\"#category-program\").hasClass(\"active\")){\n $(\"#category-buttons .tabs\").removeClass(\"active\");\n }\n \n $(\"#category-program\").on('click', function(event){\n event.stopPropagation();\n \n \/\/ Toggle the dropdown content visibility\n const isOpen = dropdownContent.style.display === \"block\";\n dropdownContent.style.display = isOpen ? \"none\" : \"block\";\n dropdownContent.classList.remove(\"active\");\n \n \/\/ tabs.classList.remove(\"active\");\n \/\/ Toggle the active class\n dropdownBtn.classList.toggle(\"active\", !isOpen); \n \n $(\"#category-buttons button\").removeClass('active');\n });\n \n \/\/ When page loads, add initial button if needed\n if ($('#more-button button').length === 0) {\n $('#more-button').append($('<button class=\"btnCategoryProgram\"><\/button>').addClass('active').css('display','none'));\n \/\/ $('#more-button').append($('<button><\/button>').addClass('active'));\n } \n \n $('.dropdown-content a').on('click', function(event) {\n event.stopPropagation();\n const value = $(this).text();\n const attrVal = $(this).attr('data-category');\n console.log('attrVal',attrVal);\n \n $('#more-button button').css('display','block');\n \/\/ console.log($(this).attr('data-category'));\n \/\/ If button exists, update its text, otherwise create new one\n \n if ($('#more-button button').length > 0) { \n $('#more-button button').text(value).attr('data-category',attrVal);\n loadCategoryPosts(attrVal);\n } \n });\n \n document.addEventListener(\"click\", function(event) { \n if (!dropdownContent.contains(event.target) && !dropdownBtn.contains(event.target)) {\n dropdownContent.style.display = \"none\";\n dropdownBtn.classList.remove(\"active\");\n } \n }); \n } \n \/\/end of loadCategoryProgram\n\n \n \/\/ function paragraphMarginTopRight(){\n \/\/ const fourthChild = $('.entry-content :nth-child(4)');\n \/\/ console.log('fourthChild',fourthChild);\n \/\/ alert(true);\n \/\/ const paragraphsInFourthChild = fourthChild.find('p');\n \n \/\/ if (paragraphsInFourthChild.length > 0) {\n \/\/ console.log(paragraphsInFourthChild); \n \/\/ } else {\n \/\/ console.log('No <p> tags found in the fourth child.');\n \/\/ }\n \/\/ }\n \n \n \/\/ Load category buttons on page load\n \/\/ Handle button clicks to load posts by category\n $(document).on('click', '#category-buttons button', function() {\n \/\/ alert('category-buttons');\n var category = $(this).data('category');\n loadCategoryPosts(category);\n\n \/\/ Remove 'active' class from all buttons\n $('#category-buttons button').removeClass('active');\n $('#more-button button').css('display','none').empty();\n \/\/ Add 'active' class to the clicked button\n $(this).addClass('active'); \n \n });\n $(document).on('click', '#more-button button', function() {\n $('#more-button button').css('display','none').empty(); \n });\n \n \/\/ Handle click on post item to navigate to the post\n $(document).on('click', '.post-item', function() {\n var postUrl = $(this).data('url');\n window.location.href = postUrl;\n });\n \n }); \n \/\/ end of jQuery(document).ready(function($)\n <\/script>\n <?php wp_footer(); ?>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":3671,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-147","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=147"}],"version-history":[{"count":1091,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/147\/revisions"}],"predecessor-version":[{"id":11605,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/147\/revisions\/11605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/media\/3671"}],"wp:attachment":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/span> $\"\"$

Success Stories<\/p>\n<\/div><\/div>\n\n\n\n\n\n \n \n WIMTACH Success Stories<\/title>\n \n <style>\n *, *::before, *::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n \n .wp-block-post-title{\n display:none;\n } \n\n #category-buttons {\n display: flex;\n }\n\n #category-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 2px;\n width: calc((315px * 1) + (0rem * 1));\n border-radius: 5px;\n margin: 2rem auto;\n }\n\n #more-button {\n margin-left: auto;\n }\n \n #category-buttons button,\n #more-button button{\n padding: 10px 20px;\n font-size: 1rem;\n background-color: white;\n border: 1px solid #D2DE38;\n cursor: pointer;\n border-radius: 5px;\n transition: background-color 0.3s, box-shadow 0.3s;\n }\n \n #category-buttons button.active,\n #category-program button.active,\n #more-button button.active{\n background-color: #D2DE38 ;\n color: black;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n position: relative;\n }\n \n #category-buttons button:hover,\n #category-program button:hover{\n background-color: #D2DE38 ; \n }\n\n #category-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, 315px);\n gap: 1.5rem;\n justify-content: center;\n margin: 0 auto 4rem auto;\n width: 95%;\n }\n \n \/*More Program Button*\/\n #category-program{\n position: relative;\n padding: 10px 20px;\n cursor: pointer;\n margin-left: auto;\n }\n\n\/* Add the icon beside More button *\/\n #category-program::after {\n content: url('https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/more-arrow.png');\n display: inline-block;\n margin-left: 1rem;\n }\n\n #category-program:hover::after {\n content: url('https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/more-arrow-hover.png');\n }\n \n \/* Dropdown content (hidden by default) *\/\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: #fafafa;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 99999;\n margin-top: 1rem;\n border-radius: 5px;\n width: 326px;\n height: 274px;\n right: 0;\n left: auto;\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: #D2D2D2 #fafafa;\n }\n \/* Links inside the dropdown *\/\n .dropdown-content a {\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n text-align:left;\n }\n .dropdown-content a:hover {\n background-color: #e4e4e4;\n text-decoration: none;\n }\n \n button.btnCategoryProgram {\n width: auto !important;\n }\n button#category-program {\n display: block !important;\n }\n \n .post-item {\n border: 1px solid #D2DE38;\n border-radius: 10px;\n height: 320px; \n width: 320px; \n box-sizing: border-box;\n transition: box-shadow 0.3s;\n display: block;\n cursor: pointer;\n }\n \n .post-item:hover {\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n }\n \n .post-item img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 10px;\n }\n \n .post-item-content {\n background-color: #D2DE38;\n height: auto; \n width: 90%;\n position: relative;\n bottom: 30%; \n margin: 0 auto;\n padding: 0.5rem;\n }\n\n \/* Restrict h2 to 2 lines and add ellipses *\/\n .post-item h2 {\n font-size: 1.125rem;\n color: #303030;\n font-weight: 700;\n margin: 0 !important;\n display: -webkit-box;\n -webkit-line-clamp: 2; \/* Limit text to 2 lines *\/\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .post-item p {\n font-size: 1.25rem;;\n color: #303030;\n font-weight: 600;\n margin: 0 !important;\n }\n \n #category-load-more .load-more {\n display: block !important;\n margin: 20px auto;\n font-size: 1.5rem;\n font-weight: 300;\n padding: 0.25rem 2.25rem;\n margin: 3rem auto;\n background: #fafafa;\n border: 2px solid #D9D9D9;\n border-radius: 5px;\n color: #303030;\n cursor: pointer;\n transition: opacity 0.3s;\n } \n #category-load-more .load-more:hover {\n opacity: 0.9;\n } \n .entry-content .wp-block-heading .ticss-fa6ae186 > div.student-name{\n padding: 0 !important;\n }\n\n .margin-top-right{\n margin: 1rem 0rem !important;\n }\n \n @media(min-width: 694px) {\n #category-buttons {\n width: calc((315px * 2) + (1.5rem * 1));\n }\n }\n \n @media(min-width: 1050px) {\n #category-buttons {\n width: calc((315px * 3) + (1.5rem * 2));\n }\n }\n\n @media(min-width: 1440px) {\n #category-buttons {\n width: calc((315px * 4) + (1.5rem * 3));\n }\n }\n \n @media (min-width: 1200px) {\n #category-content {\n padding: 0rem 1rem;\n }\n }\n \n @media (min-width: 1278px) {\n .dropdown-content {\n right: 0;\n left: auto;\n }\n \n #category-content {\n padding: 0rem 1rem;\n }\n }\n <\/style>\n <?php wp_head(); ?>\n<\/head>\n<body>\n <div class=\"main-container\">\n <div id=\"category-buttons\"> \n <\/div>\n <div id=\"more-button\" class=\"\"> \n <\/div>\n <div id=\"category-content\"> \n <\/div>\n <div id=\"category-load-more\"> \n <button id='load-more-btn' class='load-more'>Load More<\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n <script> \n \n jQuery(document).ready(function($) {\n \n loadCategoryButtons(); \n \/\/ paragraphMarginTopRight();\n \n \/\/ Function to load category buttons\n function loadCategoryButtons() {\n $.ajax({\n type: 'POST',\n url: ajax_obj.ajax_url,\n data: {\n action: 'auto_load_successstories_button' \n },\n success: function(response) {\n \n $('#category-buttons').html(response); \n $('#category-buttons button').addClass(\"tabs\");\n $('#category-buttons button:gt(4)').removeClass('tabs').addClass('program').css('display','none'); \/\/removes the buttons greater than 4 \n $('#category-buttons ').append(\"<button id='category-program' style='display:block' >More<\/button>\");\n \n loadCategoryProgram(response); \n var initialCategory = \"SuccessStories\";\n if (initialCategory) {\n loadCategoryPosts(initialCategory); \n $('#category-buttons button').removeClass('active');\n $('#category-buttons button[data-category=\"' + initialCategory + '\"]').addClass('active');\n } else { \n loadCategoryPosts('SuccessStories');\n }\n }\n });\n } \n \/\/end of function loadCategoryButtons\n \n \/\/ Function to load posts by category\n function loadCategoryPosts(category) { \n $.ajax({\n type: 'POST',\n url: ajax_obj.ajax_url,\n data: {\n action: 'load_category_posts',\n category: category\n },\n success: function(response) { \n $('#category-content').html(response);\n $('#category-content .post-item:gt(11)').hide();\n $('#category-buttons button:gt(4)').hide();\n if($('#category-content .post-item').length > 3){\n $('#category-load-more').css('display','block');\n } else {\n $('#category-load-more').css('display','none');\n }\n \n $('#load-more-btn').on('click', function(event) { \n if(event){\n $('#category-content .post-item').css('display','block'); \n $('#category-load-more').css('display','none');\n }else{\n $('#category-content .post-item:gt(3)').hide();\n $('#category-load-more').css('display','block');\n } \n });\n \n $('.post-item').each(function() {\n const $item = $(this);\n const titleElement = $item.find('h2');\n \n if (titleElement.length) {\n const text = titleElement.text(); \n if (text.indexOf(':') !== -1) {\n processContent(text, ':', $item);\n } \n else if (text.indexOf('with') !== -1) {\n processContent(text, 'with', $item);\n } else {\n console.log('test');\n processContent(text, null, $item);\n } \n } else{\n console.log('nothing',titleElement);\n }\n });\n \n function processContent(text, separator, $item) {\n const splitH2 = text.split(separator);\n let postItemContent = $item.find('.post-item-content');\n \n if (!postItemContent.length) {\n postItemContent = $('<div>').addClass('post-item-content');\n $item.append(postItemContent);\n }\n \n \/\/ Process title: Split words and capitalize second word\n const titleWords = splitH2[0].trim().split(' ');\n if (titleWords.length > 1) {\n titleWords[1] = titleWords[1].toUpperCase();\n }\n const formattedTitle = titleWords.slice(0, 6).join(' ') + (titleWords.length > 6 ? '...' : '');;\n \n \/\/ Process description: Limit to 4 words and add ellipsis\n const description = splitH2[1]?.trim() || '';\n const words = description.split(' ');\n const limitedDescription = words.slice(0, 4).join(' ') + (words.length > 4 ? '...' : '');\n \n postItemContent.html(`\n <h2>${formattedTitle}<\/h2>\n <h2>${limitedDescription}<\/h2>\n <h2><\/h2>\n `);\n } \n }\n });\n }\n \/\/end of function loadCategoryPosts\n \n \/\/ Function to get URL parameter\n function getUrlParameter(name) { \n name = name.replace(\/[\\[]\/, '\\\\[').replace(\/[\\]]\/, '\\\\]'); \n var regex = new RegExp('[\\\\?&]' + name + '=([^&#]*)'); \n var results = regex.exec(location.search); \n return results === null ? '' : decodeURIComponent(results[1].replace(\/\\+\/g, ' ')); \n }\n \n \/\/start of loadCategoryProgram\n function loadCategoryProgram(response) \n { \n $(\"#category-program\").css('display','block');\n $(\"#category-program\").append(\"<div class='dropdown-content'>\"); \n const buttons = $('.program'); \n buttons.each(function(index) { \n const url = $(this).data('category'); \n const text = $(this).text(); \n const newLink = $('<a><\/a>') \n .attr('data-category', url) \n .text(text) \n .addClass('content-program'); \n $('.dropdown-content').append(newLink);\n });\n \n const dropdownBtn = document.querySelector(\"#category-program\");\n const dropdownContent = document.querySelector(\".dropdown-content\");\n \/\/ const tabs = document.querySelector(\".tabs\");\n\n if($(\"#category-program\").hasClass(\"active\")){\n $(\"#category-buttons .tabs\").removeClass(\"active\");\n }\n \n $(\"#category-program\").on('click', function(event){\n event.stopPropagation();\n \n \/\/ Toggle the dropdown content visibility\n const isOpen = dropdownContent.style.display === \"block\";\n dropdownContent.style.display = isOpen ? \"none\" : \"block\";\n dropdownContent.classList.remove(\"active\");\n \n \/\/ tabs.classList.remove(\"active\");\n \/\/ Toggle the active class\n dropdownBtn.classList.toggle(\"active\", !isOpen); \n \n $(\"#category-buttons button\").removeClass('active');\n });\n \n \/\/ When page loads, add initial button if needed\n if ($('#more-button button').length === 0) {\n $('#more-button').append($('<button class=\"btnCategoryProgram\"><\/button>').addClass('active').css('display','none'));\n \/\/ $('#more-button').append($('<button><\/button>').addClass('active'));\n } \n \n $('.dropdown-content a').on('click', function(event) {\n event.stopPropagation();\n const value = $(this).text();\n const attrVal = $(this).attr('data-category');\n console.log('attrVal',attrVal);\n \n $('#more-button button').css('display','block');\n \/\/ console.log($(this).attr('data-category'));\n \/\/ If button exists, update its text, otherwise create new one\n \n if ($('#more-button button').length > 0) { \n $('#more-button button').text(value).attr('data-category',attrVal);\n loadCategoryPosts(attrVal);\n } \n });\n \n document.addEventListener(\"click\", function(event) { \n if (!dropdownContent.contains(event.target) && !dropdownBtn.contains(event.target)) {\n dropdownContent.style.display = \"none\";\n dropdownBtn.classList.remove(\"active\");\n } \n }); \n } \n \/\/end of loadCategoryProgram\n\n \n \/\/ function paragraphMarginTopRight(){\n \/\/ const fourthChild = $('.entry-content :nth-child(4)');\n \/\/ console.log('fourthChild',fourthChild);\n \/\/ alert(true);\n \/\/ const paragraphsInFourthChild = fourthChild.find('p');\n \n \/\/ if (paragraphsInFourthChild.length > 0) {\n \/\/ console.log(paragraphsInFourthChild); \n \/\/ } else {\n \/\/ console.log('No <p> tags found in the fourth child.');\n \/\/ }\n \/\/ }\n \n \n \/\/ Load category buttons on page load\n \/\/ Handle button clicks to load posts by category\n $(document).on('click', '#category-buttons button', function() {\n \/\/ alert('category-buttons');\n var category = $(this).data('category');\n loadCategoryPosts(category);\n\n \/\/ Remove 'active' class from all buttons\n $('#category-buttons button').removeClass('active');\n $('#more-button button').css('display','none').empty();\n \/\/ Add 'active' class to the clicked button\n $(this).addClass('active'); \n \n });\n $(document).on('click', '#more-button button', function() {\n $('#more-button button').css('display','none').empty(); \n });\n \n \/\/ Handle click on post item to navigate to the post\n $(document).on('click', '.post-item', function() {\n var postUrl = $(this).data('url');\n window.location.href = postUrl;\n });\n \n }); \n \/\/ end of jQuery(document).ready(function($)\n <\/script>\n <?php wp_footer(); ?>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":3671,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-147","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=147"}],"version-history":[{"count":1091,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/147\/revisions"}],"predecessor-version":[{"id":11605,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/147\/revisions\/11605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/media\/3671"}],"wp:attachment":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}