How can I hide a published event based on its category or tag

https://sidoti.com/events

My ultimate goal is to have featured events and upcoming events on the same page but different sections. But in order for upcoming events section to display events they have to actually be published then I can filter it. This creates a problem because it adds it to the main events section (I only want 2-3 events featured at a time).

I am unable to customize the main events section to show specific tags/categories. So my thought process was to publish all the events and hide them with code.

I don't want to hide them entirely, just from the featured events section.

@GarySmith You can achieve the following by the following steps below. It will require you publishing the events and tagging them as well. 

STEP 1:

Add a "Featured" tag to the events that you would like to be to featured.

STEP 2:

Add the following JavaScript code to the Footer using Code Injection. This script will add CSS classes to each event  based on the event's categories and tags set. This will allow us to hide/show events using CSS in a later step.

JavaScript

(async function() {
  /**
   * Adds category and tag classes to each event list item so developers can 
   * style them with CSS. 
   */
  try {
    const response = await fetch('https://sidoti.com/events?format=json');
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    const data = await response.json();
    const { upcoming } = data;

    upcoming.forEach(eventData => {
      const { tags, urlId, categories }  = eventData;
      const eventLinkEl = document.querySelector(`.eventlist-event a[href*="${urlId}"]`);
      const parentEl = eventLinkEl && eventLinkEl.closest('.eventlist-event');

      if(!parentEl) return;
      
      tags.forEach(tag => parentEl.classList.add(`tag-${stringToCssClass(tag)}`));
      categories.forEach(category => parentEl.classList.add(`category-${stringToCssClass(category)}`));
    });
    
  } catch (error) {
    console.error('Error fetching data:', error.message);
  }

  function stringToCssClass(inputString) {
    // Replace spaces with hyphens and remove non-alphanumeric characters
    const cleanedString = inputString.replace(/[^\w\s]/gi, '').replace(/\s+/g, '-');
  
    // Ensure the class starts with a letter and follows CSS naming conventions
    const validCssClass = cleanedString.replace(/^[^a-zA-Z]+/, '').toLowerCase();
  
    return validCssClass;
  }
})();

Be sure to add the JavaScript code between <script> tags like so:

<script>
  // Add JS code here
</script>

STEP 3: 

Add the custom CSS below using the CSS Editor. This targets the section under the "Featured Events" heading based on it's data-section-id HTML attribute and then hides all upcoming events EXCEPT for the ones that are tagged as "Featured". 

CSS

/* Hide all upcoming events in the "Featured" section that aren't tagged as a featured event  */
[data-section-id="60352a2206b45a3cc7e308e0"] .eventlist-event:not(.tag-featured) {
    display: none;
}

Thanks jpeter,

I tried that but it hid all the events, even the one that didn't have a featured tag. I double checked the tags and settings, everything is correct. Seems like it is selecting the entire data-section and ignoring the code after.

I also tried adding a tag of upcoming to the event i wanted to hide and using this code: (syntax is probably wrong)

[data-section-id="60352a2206b45a3cc7e308e0"] .eventlist-event(.tag-upcoming) {
    display: none;
}

Is there a small error somewhere in the code?

@GarySmith I tested it out and it appears to be working when I added the CSS in an incognito window. I'm thinking it may have been a browser cache issue. You may need to do a hard refresh of your browser to see the changes. 

Oh interesting...it is hiding it within Squarespace configuration, I was just refreshing the events page. I guess it's not that big of an issue but I can't preview it. Any idea what would cause this?

Can we change the code to hide events with tag of upcoming, would that work better? I tried adjusting the CSS but I must be doing something wrong.

I see it's working on the public site thanks.
 

@GarySmith I was able to replicate your issue on my end and it's definitely a browser caching issue. Event after clearing browser cache it was still happening. However, quitting my browser all together and re-opening it resolved the issue. 

Sorry I can't get the events to show on the website configuration page even with different browsers/incognito/clearing cache. It is working on the public view yes. I meant when logged into the Squarespace account all the published events are removed from the page. If you look at screenshots above the code says display:none is being applied to all of them.

11 hours ago, GarySmith said:

Sorry I can't get the events to show on the website configuration page even with different browsers/incognito/clearing cache. It is working on the public view yes. I meant when logged into the Squarespace account all the published events are removed from the page. If you look at screenshots above the code says display:none is being applied to all of them.

@GarySmith My previous comment about me replicating the issue was me seeing the issue logged in on the configuration page. When I was trouble shooting, I noticed I was still getting old content while logged in. Perhaps you can follow the steps I took while troubleshooting in the Chrome browser to see if you get fresh content like I did:

1. Clear Chromes storage. This article has an example of what I did.
2. Once you've cleared the storage, close the entire Chrome application, including all open windows and tabs.
   1. Keyboard shortcut for Mac, Command (⌘) + Q
   2. Keyboard shortcut for Windows, Ctrl + Shift + Q
3. Log back into site and check to see that fixed the caching issue

Ok, I misunderstood. But I followed those instructions developer tools>clear site data and it's still hidden. I opened Squarespace in Edge and Firefox for the first time and it's hidden. Closed all windows, restarted.

If you have any other suggestions let me know or I will have to revert back since. I appreciate the help regardless.

This useful?

@GarySmith What template are you using? I'll try to replicate it on my end. For the template I'm using, the events are hidden by the CSS styling as well, but are technically still there on the page.