apsolut

<!-- Add this code if you would like accordions on your Category Page -->

<div class="container-divider"></div>
<div class="container">
  <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
  </nav>

  

apsolut

<script>

const uaIOS14 = navigator.userAgent;
if (
    /iPhone/.test(uaIOS14) && 
    /OS 14_/.test(uaIOS14) &&  // Specifically checks for iOS 14.x
    !/OS 14_/.test(uaIOS14)    // Excludes iOS 15+ and newer
) {
    console.log('iOS 14');
    document.querySelector('#hs-banner-parent #hs-eu-cookie-confirmation')

apsolut

$(document).ready(function(){
		$(".content").hide();
		$(".content").slice(0, 8).show();
		$("#loadMore").on("click", function(e){
			e.preventDefault();
			$(".content:hidden").slice(0, 3).slideDown();
			if($(".content:hidden").length == 0) {
				$("#loadMore").hide();
				$(".completed").show();
			}

apsolut

Sometimes, a customer might have data being loaded programmatically into a page and want that data to write to form fields. Because HubSpot Forms are generated programmatically with React, there need to be two considerations in your code that make setting fields programmatically more difficult:

1. The data must be inserted after the form has finished loading
2. Data that is inserted programmatically must have a js "change" event fired on the field in order to propagate the change into the React data layer

These two considerations are handled separately.

Inserting form data after form load

There are two methods to handle this - one including jQuery and one using vanilla javascript

apsolut

document.addEventListener('DOMContentLoaded', function() {
    const eventList = document.querySelector('.event-list');
    const searchInput = document.getElementById('searchInput');
    const eventTypeFilter = document.getElementById('eventTypeFilter');
    const industryFilter = document.getElementById('industryFilter');
    const countryFilter = document.getElementById('countryFilter');
    const toggleFiltersBtn = document.getElementById('toggleFilters');
    const filtersContainer = document.getElementById('filters');

apsolut

  <h2 class="event-heading">Past Items</h2>
  {% for item in past_items %}
    <article class="event-item past-item">
        <div class="event-date-time">
            <time datetime="2024-09-25" class="event-date">{{ item.event_date|datetimeformat('%B %d, %Y') }}</time>
            <p class="event-time">{{ item.event_date|datetimeformat('%H:%M') }}</p>
        </div>
        <div class="event-content">
            <h2 class="event-title">{{ item.event_title }}</h2>
            <div class="event-tags">

apsolut

<div class="featured-posts-container">
    {% set featured_posts = blog_recent_topic_posts('default', 'featured', 3) %}
  
    {% for topic_post in featured_posts %}
      <a href="{{ topic_post.absolute_url }}" class="featured-post">
        <div class="topic-post " style="padding: 10px;">
      
          <div class="topic-text">
            <p>{{ topic_post.tag_list }}</p>
            <h2>{{ topic_post.name }}</h2>

apsolut

<div class="post-listing">
          {% set post_ids = [] %}
          {% for post_item in module.posts %}
            {% do post_ids.append(post_item.post_id) %}
          {% endfor %}
          
          {% if post_ids %}
            <div class="post-listing">
              {% for post_id in post_ids %}
                {% set pageContents = content_by_ids([post_id]) %}

apsolut

<div class="post-listing">
    {% set post_ids = [] %}
    {% for post_item in module.posts %}
      {% do post_ids.append(post_item.post_id) %}
    {% endfor %}
    
    {% set contents = content_by_ids(post_ids) %}
    
    {% for content in contents %}
      <div class="post-item">

apsolut

  <div class="related-posts-container">
    <div class="wrapper">
      <div class="related-posts">

      <h2 class="post-heading">{{ module.title }}</h2>

        <div class="post-listing">
          {% set post_ids = [] %}
          {% for post_item in module.posts %}
            {% do post_ids.append(post_item.post_id) %}