jQuery(document).ready(function ($) {
// Hide all sponsorship package breakdowns by default
$('.packages-breakdown .partnership-package').hide();
// Show the breakdown of the first item by default with fade-in effect
var firstItemClass = $('.packages-list .partnership-package:first').attr('class').match(/post-\d+/);
if (firstItemClass) {
$('.packages-breakdown .' + firstItemClass).fadeIn();
// Add active class to the first item
$('.packages-list .partnership-package:first').addClass('active-package');
}
// Handle click on packages list items
$('.packages-list .partnership-package').click(function () {
// Remove active class from all items
$('.packages-list .partnership-package').removeClass('active-package');
// Hide all breakdowns
$('.packages-breakdown .partnership-package').hide();
// Get the post class from the clicked item
var postClass = $(this).attr('class').match(/post-\d+/);
// Show the corresponding breakdown with fade-in effect
if (postClass) {
$('.packages-breakdown .' + postClass).fadeIn(2000);
// Add active class to the clicked item
$(this).addClass('active-package');
// Scroll to the clicked item with different offsets for mobile and desktop
var scrollOffset = window.innerWidth < 768 ? 100 : 150; // 768px is the typical mobile breakpoint
$('html, body').animate({
scrollTop: $('.packages-breakdown .' + postClass).offset().top - scrollOffset
}, 500);
}
});
});
jQuery(document).ready(function($) {
$('.price-options button').on('click', function() {
var price = $(this).data('price');
var parentPackage = $(this).closest('.partnership-package');
var priceTag = parentPackage.find('.package-price p');
// Set the price value
priceTag.text(price);
// Remove 'active-package' class from all buttons
$('.price-options button').removeClass('active-package');
// Add 'active-package' class to the clicked button
$(this).addClass('active-package');
});
// Click the first button of each price-options by default
$('.price-options button:first-child').click();
});
.packages-breakdown .partnership-package:not(:first-of-type) {
display:none;
}
.packages-list .partnership-package {
cursor: pointer;
}
.active-package {
position: relative;
}
.active-package h2 {
color: var( --e-global-color-text ) !important;
}
/* package options */
button[data-price] {
outline: 0;
border-color:var(--e-global-color-secondary);
}
button[data-price].active-package,button[data-price]:hover {
background-color: var( --e-global-color-text );
color: var(--e-global-color-primary);
border-color: var( --e-global-color-text );
}
.price-options {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
