Streaming live at 10am (PST)

How to set isotope gallery filter button as focused by default on load?


#1

Is there a way to make it so my “personalities” button is in its focused state or clicked-upon state when my portfolios page loads? Right now it’s not “focused” upon load but I’d prefer for it to be to just add some clarification as to what people are looking at. Thanks!

http://kristinepaulsenphotography.webflow.io/editorial/portfolios

Read Only is: https://preview.webflow.com/preview/kristinepaulsenphotography?preview=018969735d3025b01cfac002cbd7c3e2


#2

@KPMT Hi)
It is necessary to look at the project from the inside. Show your Read-Only link


#3

i think its enoug to understand


#4

Following this logic, I can answer that she need to apply an Interaction)
Applied to the first element Initial state an active CSS style


#5

@bro-design the link is: https://preview.webflow.com/preview/kristinepaulsenphotography?preview=018969735d3025b01cfac002cbd7c3e2


#6

My JS skill is no good, but I see solution here: https://stackoverflow.com/questions/24242950/add-and-remove-class-onclick-action

So, your tab class name is “.button.editorial” you need add new class to the first tab like as “.isotope-active”, style it as you want.

Then you can add this little script in Before Body Tag:

<script> $(".button.editorial").click(function (e) { $(this).addClass("isotope-active").siblings().removeClass("isotope-active"); }); </script>

Result you can see here:
http://broplayground.webflow.io/how-to-set-isotope-gallery-filter-button-as-focused-by-default-on-load

Read-Only link: https://preview.webflow.com/preview/broplayground?preview=199fd3556254ef8e33b2beec09ee2264

Write If you have any questions :v:️:blush:


#7

Thank you @bro-design!

I think I must be doing something wrong, though, because I can’t get this to work.

Did I do something wrong when creating the new class?

Here’s what I’ve got:

32%20PM

Thanks for your help with this!


#8

Oooh wait, nevermind! I think I got it!

I just didn’t really understand what that script was saying. So basically, I create the new class “isotope-active” and then style it to look active.

Then the script removes that additional class when I click on other tabs so it goes back to behaving normally, yes?

Thank you so much for your help!!