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
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”)
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
Created a “dh-active” class with larger styling:
Set font size to 60px
Set font weight to Bold
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
Added a visibility condition:
Set condition “dh-active Equals class”
Applied enhanced styling to this condition
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)
Experimented with different selectors:
Tried tag, class, and ID selectors
Tried combinations like “tag.dh-active”
Set up styling with “!important” flag
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:
Make a title larger when clicked
Make any previously selected title return to normal size
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.
I reached out via chat with a support request five days ago and have yet to receive a response. I’m following up here as I’m still in need of assistance. Could someone from the team please look into this and get back to me?
I don’t work for the DivHunt team, but I’ve created a very simple example here - just scroll down to the white section with ‘Clickable header 1, 2 & 3’
Clicking on each grows itself, and shrinks any existing larger-sized one. This was achieved by adding a class (I called it biggertext) to the one I wanted to start with larger, and attaching a class (I called toggle) to all three of the headings.
When you click on one of the headers, it:
First (the top action) applies a ‘Class’ action that targets .toggle with the type ‘Remove’ and Class biggertext - this is designed to go through all the headers with the class .toggle and remove any biggertext from it.
Second (the second action down on the timeline) again is a ‘Class’ action with a target of ‘self’. This had the action type ‘Add’ and the class ‘biggertext’. - This was designed to now add the class ‘biggertext’ to the header itself (as opposed to all of the headers with the ‘toggle’ class as seen before).
Is this what you meant? Someone may be able to come along soon with a better solution, but for now this might help
I’m following up again regarding the issue I raised in this thread and my private messages. It’s been over a week without a response or resolution, and unfortunately, this isn’t the first time I’ve experienced extended silence from the support team.
As an agency that has purchased over 200 licenses from Divhunt, I expect — and rely on — reliable support to be able to continue using the platform for client projects. This lack of engagement and support has been ongoing since early 2024. Despite multiple reminders and requests, I’ve encountered a consistent pattern of delayed or no response at all, including two recent forum posts that were left completely unanswered.
While I understand that Divhunt may be a small team, that explanation is no longer valid after such an extended period without meaningful improvement in support delivery. This is particularly troubling given that Divhunt actively markets itself as a strong Webflow alternative. However, unlike Webflow — which has a clearly stated 24-hour response time — Divhunt has not demonstrated any commitment or responsibility when it comes to support.
It is unreasonable to sell Agency-tier licenses while offering little to no support. This is not sustainable for professional users who depend on timely communication and troubleshooting.
Therefore, I am requesting that my current issue — and any others that follow — be treated with the seriousness and priority that a paying agency partner deserves.
If there is no response or resolution within the next 24 hours, I will be forced to take alternative steps to inform the broader community, including via Reddit and other public forums. I’ll share a fair and detailed comparison based on my professional experience — and clearly outline why, at this stage, Webflow is the more dependable platform.
I truly hope to see action from the team. I would much rather continue to build with Divhunt — but only if the support and commitment match the promise of your product.
Thank you very much for taking the time to create and share that example — I really appreciate your effort and clarity.
Unfortunately, I wasn’t able to replicate your solution on my end.
Here’s what I’ve found:
In the Divhunt interface, I’m unable to set .toggle as a target in the action list.
The system doesn’t allow targeting arbitrary class selectors like .toggle, which would be needed to remove the biggertext class from all headers.
The only available target options in Divhunt’s action system are:
The current element (Self)
Related elements like Parent, Child, Sibling
Specific elements manually selected from the structure
This limitation means I can’t apply your two-step action sequence as intended, since I can’t globally remove the class from all .toggle headers.
I’m still looking for a workaround within Divhunt’s current system, but for now, it seems this type of dynamic tab behavior (like in Calendly’s feature section) isn’t easily achievable without more flexible selector targeting.
Thanks again for trying to help — if you or anyone else discovers a way to implement this cleanly within Divhunt’s builder limitations, I’d love to hear more.
I’m not sure I understand. I used DivHunt’s system myself to create the solution - we’d be using the same builder. Which area would you like more clarity on and I can expand the solution to help you.
Thank you so much for your help and for following up! I really appreciate your time and willingness to clarify!
I wanted to give you a quick update after digging deeper into the Divhunt interface. While your instructions make perfect sense, and I can see how they should work in theory, I’m running into a limitation on my end:
When I try to set up the action to “Remove biggertext” from all headers with the .toggle class, the Divhunt action system only lets me select specific elements from a dropdown list (like “Heading 4 (H4)”, “Heading 2 (H2)”, etc.) or “Self.” There’s no option to type or select a class selector like .toggle—the list only shows individual elements by their tag and order in the structure, not by class.
I tried working around this by manually adding a “Remove” action for each header individually, but unfortunately, this approach didn’t work as intended either. The limitation seems to be that Divhunt’s action system just doesn’t support targeting all elements by class for these kinds of interactions.
If you have any tips on how you were able to target .toggle as a group in your project, or if there’s a specific workflow or setting I might be missing, I’d love to hear more! Otherwise, I just wanted to share this in case anyone else runs into the same limitation.
Thanks again for your help and for sharing your knowledge with the community!
I understand. When selecting the class, there’s an ‘add’ to the right of the dropdown you’re currently using to select (for example) ‘Heading 4 (H4)’ etc. You would use this option instead of the Target>Self dropdown. Within that, you can chose a variety of options of which ‘custom’ will allow you to type in the class you’re looking to affect (make sure you add the class identifier ‘.’ as well). This should allow you to now call the .toggle class (or whatever your naming preference) and go from there. I’ve included an image in case my description isn’t sufficient.
Is this what you are tryiing to acheive?
If yes, you dont need interactions, all you need to do is to use dh-active class and target h4 inside, and set font-size to bigger size. I did it for your project, you can customize now font size whenm you select tab opener and use dh-active h4 instance.
