SP Booking - Forum | JoomShaper
Solved General

SP Booking

Asked by Roderick 1 year ago Last activity 1 year ago

Dear Support,

I’m using the SP Booking component and I’d like to ask if there’s a way to hide the “Tour Overview” and “Itinerary” headings in the SP Booking Package component when no content is entered for those fields.

Some of my packages do have entries for these sections, so I would like the headings to display only when there is actual content.

Would it be possible to use a CSS script or custom code to achieve this? I’d appreciate your guidance on how to implement it.

Thank you in advance!

Appreciate any help.

Regards,

Rod

Accepted answer

Marked as the solution
Atick Eashrak Shuvo Staff
1 year ago

Please add the following JS code to your Template Options -> Custom Code -> Custom JS

document.addEventListener('DOMContentLoaded', function() {
    const itenaryTitle = document.querySelector('.itenary-title');
    const itenaryTab = document.querySelector('.itenary-tab');
    const tourOverviewTitle = document.querySelector('.tour-over-view-title');
    const tourOverviewDetails = document.querySelector('.tour-overview-details');

    if (itenaryTitle) {
        itenaryTitle.style.display = itenaryTab ? 'block' : 'none';
    }

    if (!tourOverviewDetails && tourOverviewTitle) {
        tourOverviewTitle.style.display = 'none';
    }
});
Roderick Asked this
1 year ago

Hello Atick,

Thank you so much for the script. I applied it, and my page now looks much better.

I truly appreciate your help!​ More power to JoomShapper!

Regards,

Rod

Atick Eashrak Shuvo Staff
1 year ago

Hello Rod,

You're most welcome! I'm really glad to hear the script worked well and your page looks better now.

Thank you for your kind words and support — it means a lot to us at JoomShaper!

If you need any further assistance, feel free to reach out anytime.

Best regards

1 more reply

Atick Eashrak Shuvo Staff
1 year ago

Hello Rod,

Thank you for reaching out, and I sincerely apologize for the inconvenience.

Unfortunately, the SP Booking component does not currently offer a built-in setting to automatically hide the “Tour Overview” and “Itinerary” headings when those fields are left empty. Additionally, this cannot be achieved through CSS alone, as CSS does not support conditional logic based on content presence.

However, it might be possible to accomplish this using custom JavaScript. To better assist you, could you please share your website URL? I’d be happy to take a closer look and determine whether a solution can be implemented for your specific setup—possibly even with some CSS if the markup allows for it.

Looking forward to your response.

Best regards

Log in to reply.