https://landgoed-energy-up.nl/wp-content/themes/tz-template/js/script.js?ver=1.0.0

1//////////////// Read more script ////////////////////////
2//////////////// Read more script ////////////////////////
3//////////////// Read more script ////////////////////////
4jQuery(document).ready(function($) {
5    var moreTags = $("span[id^='more-']");
6    var scrollPositions = {}; // Object to store scroll positions
7    var scrollOffset = -150; // Negative value in pixels, adjust as needed
8
9    moreTags.each(function(index) {
10        var moreTag = $(this);
11        var contentBelow = moreTag.nextAll();
12        var moreEndTag = moreTag.nextAll(".more-end").first();
13
14        if (moreEndTag.length) {
15            contentBelow = moreTag.nextUntil(".more-end");
16        }
17
18        contentBelow.wrapAll('<div class="read-more-content"></div>');
19        moreTag.after('<a href="#" class="read-link" data-readmore="' + theme_vars.readMoreLabel + '">' + theme_vars.readMoreLabel + '</a>');
20
21        moreTag.next('.read-link').on('click', function() {
22            scrollPositions[index] = moreTag.offset().top;
23        });
24    });
25
26    $(".read-link").click(function(event) {
27        event.preventDefault();
28
29        var hiddenContent = $(this).siblings(".read-more-content");
30
31        console.log("Click detected on:", this);
32        console.log("Targeted content element:", hiddenContent);
33
34        if (!hiddenContent.hasClass("expanded")) {
35            hiddenContent.addClass("expanded");
36            $(this).remove(); // Remove the 'Read More' link after expanding the content
37        }
38    });
39});
40
41
42
43
44
45//////////////////////GALLERY MOBILE5///////////////////////
46jQuery(document).ready(function($) {
47
48     if ($(window).width() < 768) {
49        // Store initial state of gallery-sections having top-gallery class
50        var initialState = $('.gallery-section').map(function() {
51            return $(this).hasClass('top-gallery');
52        }).get();
53
54        // Only add the accoX classes to galleries that are NOT inside a .gallery-section with .top-gallery class
55
56        $(this).find('.gallery-item').slice(0, 4).each(function(index) {
57            $(this).addClass('acco' + (index + 1));
58
59        });
60
61
62
63        // Append the close button to all galleries
64        $('.gallery').append('<div class="gallery-close-btn btn">' + theme_vars.close_label + '</div>');
65
66               // Open gallery function
67        function openGallery(targetGallery) {
68            // Add open class to the gallery div inside the clicked gallery-section
69            targetGallery.addClass('open');
70            // Remove top-gallery from the parent gallery-section
71            targetGallery.closest('.gallery-section').removeClass('top-gallery');
72        }
73
74        // Close gallery function
75        function closeGallery(targetGallery) {
76            // Remove open class from the gallery
77            targetGallery.removeClass('open');
78            // Restore top-gallery class to gallery-sections if they initially had it
79            targetGallery.closest('.gallery-section').each(function(index) {
80                if (initialState[index]) {
81                    $(this).addClass('top-gallery');
82                }
83            });
84        }
85
86        // Click event to open specific galleries
87        $('.acco1, .acco2, .acco3, .acco4').on('click', function(e) {
88            var targetGallery = $(this).closest('.gallery');
89            openGallery(targetGallery);
90        });
91
92        // Click event for the close button
93        // Note: Ensure that the close button is inside the .gallery container.
94        $('.gallery-close-btn').on('click', function() {
95            var targetGallery = $(this).closest('.gallery');
96            closeGallery(targetGallery);
97        });
98
99    }
100    /////////////////// ADD COUNTER//////////////
101    /////////////////// ADD COUNTER//////////////
102    $('.gallery').each(function() {
103        // Check if the gallery has a grid layout or masonblue layout and contains acco8
104        var hasGridOrMasonblueAndAcco8 = ($(this).hasClass('grid-layout') || $(this).hasClass('masonblue-container')) && $(this).find('.gallery-item.acco8').length;
105
106        // Select the elements based on the condition for grid, masonblue, and acco8
107        var $targets = hasGridOrMasonblueAndAcco8 ? $(this).find('.gallery-item.acco8, .gallery-item.acco4') : $(this).find('.gallery-item.acco4');
108
109        // Iterate over each target element
110        $targets.each(function() {
111            var totalImages = $(this).closest('.gallery').find('.gallery-item').length;
112            $(this).append('<div class="image-count">' + totalImages + '</div>');
113        });
114    });
115
116});
117
118
119
120
121//////////////////// STICKY//////////////////

122////////////// IS DEZE NODIG????????????///////////
123jQuery(document).ready(function($) {
124    $(window).scroll(function() {
125        if ($(this).scrollTop() > 0) {
126            $('body').addClass('header-sticky');
127        } else {
128            $('body').removeClass('header-sticky');
129        }
130    });
131});
132
133///////// Mobile nav ///////////////////
134jQuery(document).ready(function($) {
135
136    // Open the menu when the mobile menu button is clicked
137    $('.tz-mobile-menu').on('click', function() {
138        $('nav').slideDown(300);
139        $('header').addClass('open');
140        
141    });
142
143    // Close the menu when the close button is clicked
144    $('.tz-mobile-close').on('click', function() {
145        $('nav').slideUp(300);
146        $('header').removeClass('open');
147    });
148
149});
150
151////////////////////// FOOTER JS ////////////////////////////////
152jQuery(document).ready(function($) {
153    // Event for clicking on a title
154    $('.footerblok h3').on('click', function() {
155        var parentDiv = $(this).closest('.footerblok');
156
157        // Check if this block is already open
158        if (parentDiv.hasClass('open')) {
159            parentDiv.removeClass('open');
160            $(this).removeClass('active');
161        } else {
162            // Close all other blocks
163            $('.footerblok.open').removeClass('open');
164            $('.footerblok h3.active').removeClass('active');
165
166            // Open this block
167            parentDiv.addClass('open');
168            $(this).addClass('active');
169        }
170    });
171
172    // Automatically open the first block on page load
173    $('.footerblok:first-child').addClass('open');
174    $('.footerblok:first-child h3').addClass('active');
175});
176
177/////////////////////mobilenav uitklapper /////////////////////
178/////////////////////NAV mobile uitklapper /////////////////////
179jQuery(document).ready(function($) {
180    // Function to create toggle span for sub-menus
181    function createSubMenuToggle() {
182        $('.menu-item-has-children').each(function() {
183            // Check if the toggle span already exists to avoid duplicates
184            if ($(this).find('.sub-menu-toggle').length === 0) {
185                // Insert the toggle span
186                $('<span class="sub-menu-toggle"></span>').insertAfter($(this).children('a'));
187            }
188        });
189    }
190
191    // Function to toggle the sub-menu
192    function toggleSubMenu() {
193        $(this).siblings('.sub-menu').toggleClass('open');
194    }
195
196    // Initial creation of toggle elements
197    if ($(window).width() < 1200) {
198        createSubMenuToggle();
199    }
200
201    // Re-check on window resize
202    $(window).resize(function() {
203        if ($(window).width() < 1200) {
204            createSubMenuToggle();
205        } else {
206            // Remove the toggle span if the window is resized back above 1200px
207            $('.sub-menu-toggle').remove();
208        }
209    });
210
211    // Delegate the click event to the dynamically created toggle span
212    $(document).on('click', '.sub-menu-toggle', toggleSubMenu);
213});
214
215
216//////////////////////// Slider script ///////////////////////////////
217
218(function($) {
219
220    window.initializeTzSlider = function(sliderSelector, itemSelector, prevButtonSelector, nextButtonSelector, visibleItemsBreakpoints) {
221        var $slider = $(sliderSelector);
222        var currentSlide = 0;
223        var totalSlides = $slider.find(itemSelector).length;
224
225        function getVisibleItems() {
226            var width = $(window).width();
227            
228            // Convert breakpoints object to an array and sort by breakpoint descending
229            var sortedBreakpoints = Object.keys(visibleItemsBreakpoints).sort(function(a, b) {
230                return b - a;
231            });
232
233            // Iterate over sorted breakpoints
234            for (var i = 0; i < sortedBreakpoints.length; i++) {
235                var breakpoint = sortedBreakpoints[i];
236                if (width >= breakpoint) {
237                    return visibleItemsBreakpoints[breakpoint];
238                }
239            }
240            return 1; // Default to 1 item if nothing else is specified
241        }
242
243
244
245    function updateArrows() {
246      var itemsVisible = getVisibleItems();
247      var $prev = $slider.find(prevButtonSelector);
248      var $next = $slider.find(nextButtonSelector);
249
250      // IF there’s nothing to slide, hide _both_ buttons
251      if (totalSlides <= itemsVisible) {
252        $prev.hide();
253        $next.hide();
254      } else {
255        $prev.show().prop('disabled', currentSlide === 0);
256        $next.show().prop('disabled', currentSlide >= totalSlides - itemsVisible);
257      }
258    }
259
260        function slide() {
261            var itemsVisible = getVisibleItems();
262            var itemWidth = $slider.find(itemSelector).outerWidth(true);
263
264            var maxSlideIndex = totalSlides - itemsVisible; // Maximum index you can slide to
265            currentSlide = currentSlide > maxSlideIndex ? maxSlideIndex : currentSlide; // Clamp currentSlide
266            var translateValue = -(currentSlide * itemWidth);
267            $slider.find('.row').css('transform', 'translateX(' + translateValue + 'px)');
268        }
269
270        // Rest of the code remains the same...
271
272
273        $slider.find(nextButtonSelector).click(function() {
274            var itemsVisible = getVisibleItems();

275            if (currentSlide < totalSlides - itemsVisible) {
276                currentSlide++;
277                slide();
278            }
279            updateArrows();
280        });
281
282        $slider.find(prevButtonSelector).click(function() {
283            if (currentSlide > 0) {
284                currentSlide--;
285                slide();
286            }
287            updateArrows();
288        });
289
290
291        $(window).resize(function() {
292            slide(); // Adjust slide position on window resize
293            updateArrows();
294        });
295
296        updateArrows();
297        slide(); // Initial slide position
298    }
299
300
301})(jQuery);
302
303
304/////////////////// JS POPUP KILLER ////////////////
305(function() {
306    var originalAddEventListener = window.addEventListener;
307    
308    window.addEventListener = function(event) {
309        if (event === 'beforeunload') {
310            //console.log('Prevented beforeunload'); // This is just for debugging. Remove after confirming it works.
311            return;
312        }
313        originalAddEventListener.apply(this, arguments);
314    }
315})();
316
317
318////////////////// Read more om en om blokken ////////////////
319jQuery(document).ready(function($) {
320    // Function to handle the visibility of paragraphs and buttons based on screen size
321    function handleReadMoreVisibility() {
322        if ($(window).width() < 650) {
323            // For screens below 650px
324            $('.read-more-omenom:not(.mobile)').hide(); // Hide normal read more buttons
325            $('.read-more-omenom.mobile').show(); // Show mobile read more buttons
326            $('.read-more-omenom.mobile').each(function() {
327                $(this).parent().nextAll('p').hide(); // Hide all following paragraphs
328            });
329            // Add click event to 'Read More' spans
330            $('.read-more-omenom.mobile').on('click', function() {
331                // Toggle visibility of all paragraphs following the parent of 'Read More'
332                $(this).parent().nextAll('p').slideToggle();
333                // Hide the 'Read More' span itself
334                $(this).hide();
335            });
336        } else {
337            // For screens 650px and above
338            $('.read-more-omenom.mobile').hide(); // Hide mobile read more buttons
339            $('.read-more-omenom:not(.mobile)').show(); // Show normal read more buttons
340            $('.read-more-omenom:not(.mobile)').each(function() {
341                $(this).parent().nextAll('p').hide(); // Hide all following paragraphs
342            });
343            // Add click event to 'Read More' spans
344            $('.read-more-omenom:not(.mobile)').on('click', function() {
345                // Toggle visibility of all paragraphs following the parent of 'Read More'
346                $(this).parent().nextAll('p').slideToggle();
347                // Hide the 'Read More' span itself
348                $(this).hide();
349            });
350        }
351    }
352
353    // Initially handle visibility based on current screen size
354    handleReadMoreVisibility();
355
356    // Re-handle visibility when window is resized
357    $(window).resize(function() {
358        handleReadMoreVisibility();
359    });
360});
361
362
363
364
365//////////////////// Overserver voor slider animated gif ///////////////////////
366document.addEventListener('DOMContentLoaded', function() {
367    var observer = new IntersectionObserver(function(entries) {
368        entries.forEach(function(entry) {
369            if (entry.isIntersecting) {
370                // Add the "animate" class
371                entry.target.classList.add('animate');
372                
373                // Set a timeout to remove the class after 3 seconds
374                setTimeout(function() {
375                    entry.target.classList.remove('animate');
376                }, 4000); // 3000 milliseconds = 3 seconds
377
378                // Optional: Unobserve the target if the animation needs to run only once
379                observer.unobserve(entry.target);
380            }
381        });
382    }, {
383        rootMargin: '0px',
384        threshold: 0.1
385    });
386
387    // Target the element to observe
388    var target = document.querySelector('.arrangementen-slider');
389    if (target) {
390        observer.observe(target);
391    }
392});
393
394
395
396///////////////// SCRIPT BOTTOMBAR ZB ///////////////////////
397jQuery(document).ready(function($) {
398    // Check if the '.harbor-widget-titan' does NOT exist on the page
399    if (!$('.harbor-widget-titan').length) {
400        // If the '.harbor-widget-titan' class does not exist, remove the '.tz-bottom-bar-hider' element
401        $('.tz-bottom-bar-hider').remove();
402    }
403});
404
405

406/////////////// zb bottom bar mobile
407jQuery(document).ready(function($) {
408    if ($('.tz-bottom-bar-hider').length && $(window).width() < 650) {
409        $('body').addClass('bodymarginzb');
410    }
411});
412
413
414///////////////////////////////// JS voor rankmath faq //////////////////
415///////////////////////////////// JS voor rankmath faq //////////////////
416jQuery(document).ready(function ($) {
417
418    $('.rank-math-block').each(function (faqIndex) {
419        var $faq = $(this);
420        var $items = $faq.find('.rank-math-list-item');
421
422        if (!$items.length) {
423            return;
424        }
425
426        // Add unique helper class per FAQ block
427        $faq.addClass('rank-math-faq-' + faqIndex);
428
429        // Reset all items in this FAQ block
430        $items.removeClass('is-open');
431        $items.find('.rank-math-answer').hide();
432
433        // Optional: open the first item of each FAQ block
434        $items.first()
435            .addClass('is-open')
436            .find('.rank-math-answer')
437            .show();
438
439        // Click behavior, scoped to this FAQ block
440        $faq.find('.rank-math-question').on('click', function () {
441            var $clickedItem = $(this).closest('.rank-math-list-item');
442
443            // Do nothing if already open
444            if ($clickedItem.hasClass('is-open')) {
445                return;
446            }
447
448            // Close current open item inside this FAQ block only
449            $faq.find('.rank-math-list-item.is-open')
450                .removeClass('is-open')
451                .find('.rank-math-answer')
452                .stop(true, true)
453                .slideUp(300);
454
455            // Open clicked item
456            $clickedItem
457                .addClass('is-open')
458                .find('.rank-math-answer')
459                .stop(true, true)
460                .slideDown(300);
461        });
462    });
463
464});