🔴 LIVE - Horizontal Accordion Interaction in Webflow

Project cloneable at
webflow.grsm.io/horizontal-ac...
Original site at www.marikostudio.com/services
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@ellenhossain]

Omg I can't believe there's finally a tutorial for this exact horizontal website I was looking for! Thank you so much Timothy for making my life so much easier with your videos

[@merkmotief]

Man, I come here for the tabs technique but already after 2 minutes again you taught me something new and very handy! CSS vertical text, awesome! So much better than rotating 🙂 Thanks Timothy!

[@DavidPeyrouty]

Just amazing!!! Everything you do seems so simple... And with your pedagogy, it is ! Thank you so much !!!

[@Wildenfree]

I really like this setup T.Ricks! Thinking I might implement this for my new home page on my website. Simple, intuitive & functional.

[@gersimpson9803]

All praise the High Wizard! I plan on subscribing to the Patreon tomorrow (first of the month), thanks for the great content!

[@jeremydetina9453]

Really great tutorial and smart solution! Thank you!

[@andrijacvorovic5642]

Your videos are crazy good and advanced gj bro you are killing it!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@kudz]

Another banger 💪

[@louistomlin4626]

Can we do it with timed automatic? I love this interaction

[@gabrielabasta9663]

Hello! Thank you so so much for the video, it's awesome! Btw, would it be possible to have the active state removed on second click on the tab link? I'm new to Jquery and just spent hours trying to figure it out😩 I would reeeeeally appreciate your help on that! All best!

[@keetalux]

[@kidkatie9664]

what do I do if I'm adding active to only certain tabs but the widths I'm changing are applying to all tabs, even though they don't have the active class there? :(

[@kevynlevine]

Great vid! What’s advantage of using code rather than building in interactions?

[@timothyricks]

Thank you! I think with using Webflow Interactions, we'd need a unique interaction for each tab link to animate the related content div. (We can target all siblings with Webflow interactions but can't target only the "next" sibling.) Also, we'd need another version of each of those interactions for mobile to animate the height instead. With jQuery, we keep the same code for both desktop and mobile and just change the designer styles.

[@aniastanczyk6055]

@@timothyricks Actually, as I discovered (after a long trial and error struggle) you can achieve it with one simple, reusable, trigger-based interaction, with only two elements inside (shrink all of the siblings + expand the clicked trigger element). However, the process of targeting classes when you build the interaction is a little bit hacky, you have to target a specific div with a common sibling class assigned (as the target of the 'shrink all siblings' action) and delete it before applying the interaction to the rest of the common-class-divs. Don't know if that made sense;) But it works!

[@irismiranda3650]

How can I do that with a single tab that overlaps the page?

[@steveworrell]

Hey. I'm thinking of joining the wizards patreon for the slack channel. I know one to one project support isn't included but does that mean I can't ask for help in the slack channel from the community? For example if I need help with an idea or with a project could I say, " hey how can I achieve this (insert idea) in this project?" Not a problem if it's not the right place but I am looking for somewhere with a more community vibe to help each other on projects. Thanks.

[@timothyricks]

Hi Steve, thanks for the interest in joining! Those types of questions are really encouraged and usually result in some group problem solving, a future tutorial, or something we work on together during one of the monthly hangouts.

[@surbhitomar4562]

Hi Ricks, I created a slider on my website with the help of your slider tutorial. I am having an issue from some days that whenever I click on the arrow then the height of the container changes, the same thing is happening in your slider also plz help me in this situation.

[@timothyricks]

I actually experienced this too and was able to fix it on my end by updating the JS and CSS links to the latest version of Splide. timothyricks.notion.site/Carousel-Slider-Collection-splide-3-2-2-0329bcfde0124afa8de9eafb9973d6af

[@SurruTomar]

@@timothyricks Thank you so much for your help