Support Request: Creating Larger Titles When Selected in Divhunt

General
1

Issue Description

I’m trying to implement a feature where when a user clicks on a title, that title becomes larger (increased font size), while any previously selected title returns to normal size. This is similar to the tab-like behavior seen on Calendly’s features section.

What I’ve Tried

  1. Created title elements with proper classes and IDs:

  • Added two title elements with h4 tags

  • Assigned classes (“title-1”, “title-2”) and IDs (“title1”, “title2”)

  1. Created click interactions:

  • Set up “Title1_Active” and “Title2_Active” click interactions

  • Created “Toggle Active” interaction

  • Set up “On Click dh.click” and “Activate2 dh.click” interactions

  1. Created a “dh-active” class with larger styling:

  • Set font size to 60px

  • Set font weight to Bold

  1. Set up specific h4 targeting:

  • Created a selector “tag.dh-active h4”

  • Added this as an instance with “Active” state

  • Styled this instance with 60px bold font

  1. Added a visibility condition:

  • Set condition “dh-active Equals class”

  • Applied enhanced styling to this condition

  1. Tried various instance configurations:

  • Created “self.dh-active” instance

  • Created “tag .dh-active” instance

  • Created “self.dh-active h4” instance

  • Styled these instances with larger font (60px)

  1. Experimented with different selectors:

  • Tried tag, class, and ID selectors

  • Tried combinations like “tag.dh-active”

  • Set up styling with “!important” flag

  1. Separated elements from loop:

  • Originally had a loop x5 for titles

  • Separated them into individual elements for testing

The Issue

Despite all these attempts, when I click on a title, it does not become larger. Additionally, when I click on a different title, the previously selected title does not return to normal size.

The styling for the active state is defined correctly (60px, Bold), but it’s not being applied when an element is clicked, suggesting that the class or state isn’t being properly toggled by the interactions.

What I Need

I need a clear, step-by-step explanation of how to:

  1. Make a title larger when clicked

  2. Make any previously selected title return to normal size

  3. Have one title selected by default when the page loads

This functionality should work similar to a tab interface where only one title is “active” (larger) at any given time.

Thank you for your assistance with this issue.

2

Can you send me a link and screenshot of section (title) where are you trying that?

3

I have sent you a chat message with the details. Thank you!