KPMT
(Kristine)
July 17, 2018, 5:44am
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!
Missoula Montana photojournalist, editorial & commercial photographer specializes in genuine, emotion-filled documentary imagery for clients in Montana, the west, & across the U.S. Here she showcases photo portfolios featuring personalities,...
Read Only is: https://preview.webflow.com/preview/kristinepaulsenphotography?preview=018969735d3025b01cfac002cbd7c3e2
bro-design
(Dmitrii Tregubov)
July 17, 2018, 5:57am
2
@KPMT Hi)
It is necessary to look at the project from the inside. Show your Read-Only link
pet
(jack)
July 17, 2018, 6:08am
3
i think its enoug to understand
https://petz4u.com/
bro-design
(Dmitrii Tregubov)
July 17, 2018, 8:26am
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
KPMT
(Kristine)
July 17, 2018, 4:14pm
5
bro-design
(Dmitrii Tregubov)
July 17, 2018, 7:03pm
6
My JS skill is no good, but I see solution here: javascript - Add and remove class onClick action - Stack Overflow
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
1 Like
KPMT
(Kristine)
July 23, 2018, 11:16pm
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:
Thanks for your help with this!
KPMT
(Kristine)
July 23, 2018, 11:36pm
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!!