I have a complicated question, on that section I am tryting to achieve an interaction which I have no idea how to do that. I created accordion hover for those services but what my client wants is when scrolling to that service section, it should open automatically one by one in every 10 sec and close the other and show one image for every service on the right side.
This is with CMS and I have really no clue how to achieve that with CMS elements, if it wasn’t CMS I could have done it with interactions.
Hello i cant delivery you all but i can start with some code so maybe someone else can help you with the rest
Here is a script i used wich clicks on a tab (tablink has the classname click5) when the page is scrolled between 50 and 65 Percent… So it triggers if you scrolling from the top to bottom at 50% and viceversa if you scrolling from bottom to the top at 65%…
If you combine this with some timer wich will trigger the other tabs (between the scrollrange) with the same click function i think you will get what you need…
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
$(window).on('scroll', function() {
var st = $(this).scrollTop();
var wh = $(document).height() - $(window).height();
var $perc = (st*100)/wh
console.log($perc);
if(50 < $perc && $perc < 65) {
$('.click5').click();
}
});
});
Thank you Matzinger, I used that for the tab section ( one section above ) but the problem is this is not a tab section and works with CMS, I doubt it would work with that ?
I made it to work little bid with my code but it just clicks the first service and not the others… and then other problem would be I need it to be open when its hovered not clicked
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
// start everything
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// define loop - cycle through all tabs
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.click5').children('.w--current:first').next();
if($next.length) {
$next.click(); // click resets timeout, so no need for interval
} else {
$('.click5:first').click();
}
}, 4500); // 4,5 second tab loop
}
// reset timeout if a tab is clicked
$('.click5').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
I tried with your code