https://my.host/includes/themes/mijn.host/assets/js/hosting/btn-webhosting-details.js?v=1786972324

1$(function () {
2
3  // 1) The single "View all specs" button
4  const $btnDetails = $('.btn-webhosting-details');
5  // 2) All hosting packages in both containers:
6  const $allPackages = $('.container-packages .webhosting-packet');
7
8  // 3) Attach click handler to the one "Bekijk alle specificaties" button
9  $btnDetails.on('click', function(e){
10    e.preventDefault();
11    $(this).toggleClass('active'); // toggles the button highlight (open vs closed)
12
13    // Based on active state, open or close *all* packages
14    packagesResize($allPackages, this);
15  });
16
17  // 4) Also watch monthly/yearly toggle
18  $('.period-container.price-toggle .btn').on('click', function() {
19    // If the "view details" is currently active, re-run the open layout
20    // If it’s not active, do a forced "close" layout
21    if ($btnDetails.hasClass('active')) {
22      packagesResize($allPackages, $btnDetails);
23    } else {
24      packagesResize($allPackages, $btnDetails, true);
25    }
26  });
27
28  // 5) On window resize, close them all
29  $(window).on('resize', function() {
30    $btnDetails.removeClass('active');
31    $allPackages.find('.webhosting-details').slideUp(200);
32
33    // Reset heights
34    $allPackages.find('.bottom-fill.static-fill').css('margin-top', '20px');
35    $('.packages').css('height', 'auto');
36    $allPackages.find('.bottom-placeholder').show();    
37  });
38
39  // 6) If user switches from Normaal <-> Website Builder,
40  //    forcibly close open details so the newly shown container isn’t messed up.
41  $('.period-container.subscription-type .btn').on('click', function() {
42    // Toggle the containers
43    $('.container-regular-hosting, .container-website-builder-hosting').toggle(5);
44
45    // Force everything closed
46    $btnDetails.removeClass('active');
47    $allPackages.find('.webhosting-details').stop().slideUp(200);
48    $allPackages.find('.bottom-fill.static-fill').css('margin-top', '20px');
49    $('.packages').css('height', 'auto');
50    $allPackages.find('.bottom-placeholder').show();
51  });
52
53});
54
55
56/**
57 * packagesResize
58 *
59 * - $packages: all .webhosting-packet elements to animate
60 * - btnDetails: the *single* "Bekijk alle specificaties" button
61 * - forceResize: if true => forcibly reset to default/closed
62 */
63function packagesResize($packages, btnDetails, forceResize = false) {
64  $packages.each(function(index, element) {
65    const $packet  = $(element);
66    const $details = $packet.find('.webhosting-details');
67
68    // Are we opening or closing?
69    const isActive = $(btnDetails).hasClass('active');
70
71    if (isActive && !forceResize) {
72      // --- OPEN the details ---
73
74      // Hide the last .white-body
75      if ($packet.children('.white-body').length > 1) {
76        $packet.children('.white-body').last().hide();
77      }
78
79      // 1) Calculate needed heights
80      const whiteHeadHeight          = $packet.find('.white-head').outerHeight() || 0;
81      const blueBodyHeight           = $packet.find('.light-blue-transition-body').outerHeight() || 0;
82      const whiteBodyHeight          = $packet.find('.white-body').first().outerHeight() || 0;
83      const greenBodyHeight          = $packet.find('.light-green-body').outerHeight() || 0;
84      const bottomPlaceholderHeight  = $packet.find('.bottom-placeholder').outerHeight() || 0;
85      const totalHeight              = whiteHeadHeight + blueBodyHeight + whiteBodyHeight + greenBodyHeight;
86      let newHeight                  = totalHeight + $details.outerHeight();
87
88      // If you have "shoppingcart" logic
89      if ($('main').hasClass('shoppingcart')) {
90        newHeight += 15;
91      }
92
93      // Animate parent .packages container if needed
94      $packet.parents('.packages').animate({ height: newHeight + bottomPlaceholderHeight }, 200);
95
96      // Move the bottom fill
97      $packet.find('.bottom-fill').css('margin-top', totalHeight + 'px');
98
99      // Slide down
100      $details.stop().slideDown(200);
101
102    } else {
103      // --- CLOSE the details ---
104
105      $details.stop().slideUp(200);
106
107      // Show last .white-body again
108      $packet.children('.white-body').last().show(200);
109
110      // Auto-animate the parent .packages height
111      autoHeightAnimate($packet.parents('.packages'), 200);
112    }
113  });
114}
115
116
117/**
118 * autoHeightAnimate
119 * - Animates from current fixed height to "auto" height
120 */
121function autoHeightAnimate($element, time) {
122  const curHeight  = $element.height();
123  const autoHeight = $element.css('height', 'auto').height();
124  $element.height(curHeight);
125  $element.stop().animate({ height: autoHeight }, time);
126}