Display hidden div element using jQuery in HubSpot

Other Questions HubSpot
1

I’m trying to make a hidden div visible using jQuery’s show() method in HubSpot. The script is placed inside a content module but it’s not working as expected.

<script>
$(function(){
  $("#ContentSection_9876543").show();
});
</script>

I also attempted using this alternative syntax but had no luck:

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

My goal is to reveal a specific content block (ContentSection_9876543) from one page when users navigate to another section. The div structure looks like this:

<div id="main_ContentArea" containersrc="layout.ascx">
  <div id="main__content_ContentArea">
    <div id="main__content__panel_ContentWrapper">
      <div id="ContentSection_9876543" class="ContentBlock Standard">
        <!-- content here -->
      </div>
    </div>
  </div>
</div>

I can only use custom CSS overrides and cannot modify the HTML structure directly. What am I missing here?

2

hubspot can be tricky sometimes. your script might be executing before the div loads. try using a setTimeout or ensure your code runs after the document is ready. i had success with setTimeout(function(){ $("#ContentSection_9876543").show(); }, 1000);.

3

check if your div has inline styles overriding the show() method. hubspot sometimes adds inline style="display:none" which conflicts with jQuery. try using .attr('style', '') to clear inline styles first, then call show(). also make sure your script loads after hubspot’s core js files or it won’t work.

4

The problem’s probably that HubSpot loads content modules dynamically through AJAX after the page loads. I ran into this same thing with HubSpot’s CMS - wrapping your jQuery in a MutationObserver works way better than setTimeout intervals. The observer watches for DOM changes and fires when your target div actually shows up. You could also try HubSpot’s built-in events like $(document).on('page:loaded') if your template supports it. Also double-check that the div ID matches what you expect - HubSpot sometimes generates different IDs than what you see in the editor, especially with dynamic content blocks.

5

Your div probably isn’t rendered yet when jQuery tries to find it. HubSpot’s content modules load async, so your DOM manipulation runs before the element exists. I hit this same issue last month and fixed it with setInterval to check if the element’s there first. Try this: setInterval(function(){ if($('#ContentSection_9876543').length > 0){ $('#ContentSection_9876543').show(); clearInterval(this); } }, 100); This keeps checking until the element loads, shows it, then stops the interval. Also put your script after the content module in the page structure, not before.

6

Your div is probably hidden with CSS display: none or visibility: hidden. jQuery’s show() only works with display: none. If HubSpot’s using visibility: hidden or other CSS properties, you’ll need different methods. Try $('#ContentSection_9876543').css('visibility', 'visible') or $('#ContentSection_9876543').css('display', 'block') instead. Also check that jQuery loads before your script runs. I’ve had HubSpot’s CSS override jQuery changes before - you might need to add !important declarations with .css() to force the visibility change.