Display additional div using jQuery in HubSpot

Other Questions HubSpot
1

I’m trying to make an extra div show up with jQuery’s .show() function in a HubSpot content module. My code is at the top, but it’s not working:

$(document).ready(function(){
  $('#contentSection_456789').show();
});

I also tried:

$('#' + sectionId).show();

But no luck. My goal is to load a specific content module when clicking a menu item, while showing another module in the background. I can’t add IDs or styles, just use custom CSS.

Here’s my div structure:

<div class="main-content">
  <div class="content-wrapper">
    <div class="section-container">
      <div id="contentSection_456789" class="content-block">
      </div>
    </div>
  </div>
</div>

Any ideas on how to make this work? Thanks!

2

I’ve encountered similar issues with HubSpot modules. One thing to consider is that HubSpot might be loading content dynamically, which could interfere with your jQuery. Try wrapping your code in a setTimeout function to ensure the DOM is fully loaded:

setTimeout(function() {
    $('#contentSection_456789').show();
}, 1000);

This delays the execution by 1 second, giving HubSpot time to render the content. If that doesn’t work, you might need to use HubSpot’s native JavaScript API to manipulate the modules. Without direct access to your HubSpot environment, it’s challenging to provide a more specific solution. Have you considered reaching out to HubSpot support for guidance on module manipulation?

3

hey there JumpingMountain, have u tried using the .css() method instead? something like:

$(‘#contentSection_456789’).css(‘display’, ‘block’);

or check if the element exists first:

if ($(‘#contentSection_456789’).length) { $(‘#contentSection_456789’).show(); }

hope that helps! lemme know if u need anything else