How to set dropdown to open on default in Webflow

  Рет қаралды 7,429

KC Katalbas

KC Katalbas

Жыл бұрын

Here’s how you can have a dropdown open on default in webflow with a little Jquery assistance. Code below
DISCLAIMER: Since I recorded this it's been found that this code doesn't seem to work when interactions are applied to the dropdown. Keep in mind! May record a more comprehensive update some time:
$(document).ready(function() {
$('#toggle-1').addClass('w--open');
$('#dropdown-list-1').addClass('w--open');
$('.dropdown-wrap').on('click',function() {
$('#toggle-1').removeClass('w--open');
$('#dropdown-list-1').removeClass('w--open');
});
});
-----------------------------------------------
✨ ABOUT ME
Hi! I'm KC Katalbas. I'm a web designer, developer, and maker of things. I'm based in Nashville, Tennessee where I also make art and music.
-----------------------------------------------
✨ KC KAT CREATIVE
www.kckat.com/
/ kckatcreative
webflow.com/kckatcreative
-----------------------------------------------
✨ MUSIC & TECH
Music from Artlist.io. All music by the artist Aves

Пікірлер: 16
@2kpixy
@2kpixy Жыл бұрын
Works great, thank you for sharing! 😍
@margaritawise
@margaritawise 11 ай бұрын
Thanks a lot! Exactly what I needed 😍
@world_changers
@world_changers 5 ай бұрын
Thanks a lot. VERY HELPFUL!
@cassandradesrosiers7707
@cassandradesrosiers7707 4 ай бұрын
This was exactly what I needed. I'm trying to link to an open accordion when you click a button from another page. so I added some code to look at the anchor that's in the url and if it's there there then open this specific accordion item. It works when I turn off interactions but no way to close which sucks. So you're right it doesn't seem to work when interactions are applied to the dropdown. I'd love to see an update or a workaround for this!
@cassandradesrosiers7707
@cassandradesrosiers7707 4 ай бұрын
I decided to turn off all interactions on the accordions and create the accordion toggle myself with jquery. now this code works! very happy.
@Juritardet
@Juritardet Жыл бұрын
great video, I was actually trying to fix that one dropdown covers other dropdowns when open and you answered that too. Thanks!
@onyekakingsley8193
@onyekakingsley8193 Жыл бұрын
life saver!!
@appliedclicheistics
@appliedclicheistics 11 ай бұрын
Thank you so much, it worked like a charm
@nctn5717
@nctn5717 Жыл бұрын
Thank youuuuu !
@lorenzobrandimarte1427
@lorenzobrandimarte1427 5 ай бұрын
Thank you! Is it ok to add the 'window.innerWidth' property? to make the code only working on mobile?
@ivanspasic5271
@ivanspasic5271 Жыл бұрын
Hi Katie, please i need help, can you tell me how to change width on dropdown list and also be responsive. I want to change width to 1200px
@baron5978
@baron5978 Жыл бұрын
I tried this using classes instead of ID's. Does it only work when using ID's?
@eyimusic7534
@eyimusic7534 Жыл бұрын
Hi Katie, thanks alot for the video. I want to get your opinion on what platform/source is best to learn webflow sites from beginner-advanced as fast and quickly as possible? Is it a specific Udemy course, or is it through their own Webflow university courses, Or any other resource that you think is the best and fastest way to learn?(Looking for a single resource, maybe a single long video that covers all/most of the stuff.) Secondly, I would like to get your opinion on my Webflow project idea which includes in it some Ecommerce functionality. I just added you over linkedin for further communication, let me know please when you get the chance to reply,best
@kevynlevine
@kevynlevine Жыл бұрын
“Codey-poo” Great vid!
@korobovkorobov
@korobovkorobov Жыл бұрын
I've done all the same, checked names and it's not working
DnD Name Generator using Webflow and Javascript
14:15
KC Katalbas
Рет қаралды 938
🔴 LIVE - Horizontal Accordion Interaction in Webflow
14:01
Timothy Ricks
Рет қаралды 10 М.
아이스크림으로 체감되는 요즘 물가
00:16
진영민yeongmin
Рет қаралды 36 МЛН
Looks realistic #tiktok
00:22
Анастасия Тарасова
Рет қаралды 76 МЛН
Me: Don't cross there's cars coming
00:16
LOL
Рет қаралды 14 МЛН
CMS Accordion + Images   Initial   State   Webflow
28:07
Decimal Flamingo
Рет қаралды 583
WEBFLOW CLONEABLE: SaaS Pricing Calculator
18:28
Chris T.
Рет қаралды 312
11. Advanced Webflow development tutorial: the FAQ section
14:12
Stacking Card Effect in Webflow (Tutorial)
10:38
Mike Pecha
Рет қаралды 19 М.
아이스크림으로 체감되는 요즘 물가
00:16
진영민yeongmin
Рет қаралды 36 МЛН