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!
http://kristinepaulsenphotography.webflow.io/editorial/portfolios
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
cat clothes for cats,sell pets online in pakistan,sell cow and calves online,sell dogs and puppies online,sell cats and kittens online,pets supplies online,pet accessories shop,buy pet accessories online,buy dog products online,buy dog food products...
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: 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 ️:blush:
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!!