Style "Current" State of CMS Anchor Links Using Custom Code

Design help Custom code
1

Hey everyone,

So far, I’ve successfully set up 2 collection lists that are anchored to eachother. The process was rather simple. First, I added an HTML embed inside of a collection item and added the following code:

Anchor%20Link%201
Anchor%20Link%201872×754 75.1 KB

To make it dynamic, the “yourId” was replaced with a dynamic field linked to a simple text field in the CMS collection, i.e “#yourIdeExample”.

Next, a link block was added inside an anchor links collection item and was linked using a URL field in the collection list, such as “yourdomain.com is available for purchase - Sedo.com”. With this setup, everything works accordingly.

Anchor%20Link%202
Anchor%20Link%202603×972 94.3 KB

My issue is now trying to style the “current” state of these anchor links. This is a provided feature natively in Webflow for static content but I’m not quite sure how to do it with custom code. If I had to guess, it involves a little bit of Javascript and adding in an additional class when active. Does anyone have any insight?

Live Site: https://pfc-demo.webflow.io/open-a-bar/choose-your-menu
Read-Only Link: https://preview.webflow.com/preview/pfc-demo?utm_medium=preview_link&utm_source=designer&utm_content=pfc-demo&preview=823f9a80b2426e4e8f15c69f6b4e5e28&pageId=5d93fc8f9757b8488b90d020&mode=preview

2

to style with custom code all you have to do is write inline CSS…
<style> .youdivclass {height: 100px; width 200px}; </style>

just like that…

if you want to create states on click or hover with javascript you have use toggle class command
$(".yourdivclass").on("click", function() { $(".yourdivclass").toggleClass("yourcomboclass"); });

so basically you create a comboclass for your altered state, and add transitions (so the change is animated) - publish and voila - it works!

Oh and if you are styling a CMS item then add this tidbit (so the rest of the cms items are not triggered at the same time)
$(".yourdivclass").not($(this)).find(".yourdivclass").removeClass("yourcomboclass"); });

3

Thank you for the help @IVG! The only issue I’m having is the last part, for some reason all of the collection items are being set to active and then removed. My code is this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".ribbon-nav-wrapper-item").on("click", function() { 
  $(".ribbon-nav-wrapper-item").toggleClass("active"); 
  });
  $(".ribbon-nav-wrapper-item").not($(this)).find(".ribbon-nav-wrapper-item").removeClass("active"); 
  });
</script>

Preview link: https://preview.webflow.com/preview/pfc-demo?utm_medium=preview_link&utm_source=designer&utm_content=pfc-demo&preview=823f9a80b2426e4e8f15c69f6b4e5e28&pageId=5d93fc8f9757b8dc1d90d021&mode=preview

I’m also unaware as to whether or not this solution will style a “current” state vs an “active” state. With this, I am able to keep clicking the same button and it will toggle on/off as opposed to being active as long as its linked in the href to its ID. Any thoughts?

4

First, you don’t need to have the jquery source since webflow has that by default.
Second, the toggle class will open one and close all others on click - it will not have an effect that all clicked cards will remain open…

vis a vis code - you closed the on click function before you included the command to remove class from all other cms items… so you need to move the brackets one line down so it looks like this:

$(document).ready(function(){
  $(".ribbon-nav-wrapper-item").on("click", function() { 
  $(".ribbon-nav-wrapper-item").toggleClass("active"); 
  $(".ribbon-nav-wrapper-item").not($(this)).find(".ribbon-nav-wrapper-item").removeClass("active"); 
    });
  });
1 Like
5

Perfect! This worked great :slight_smile: thank you for the help @IVG