Oct 14, 2019
White Arrow icon
Back to all Elements

Variant Width for CMS items

Applying variant width to CMS items on the same list.

  1. First we need to add a field in our collection. This field tells the code what width the element should be. Let's use an option field and call it "Width".
  2. Next, we will set 3 options (you can give as many as you like) by text (so it can be easily translated into CSS classes) 'big', 'mid', 'small'.
  3. Now let's add this field to every item. We can give this field a class: 'variant-width'. Later we can also hide it with a 'display:none' property.
  4. All we have to do now is paste the code, that converts the text options in the option field on each item, to a CSS class.

BTW- This method can be applied to any css property.

<script>

 $(function() {

   $("div.variant-width").each(function() {

     var myclass = $(this).text();

     var mytarget = $(this).parent();

     switch (myclass) {

       case "big":

         mytarget.css("width", "50%");

         break;

       case "mid":

         mytarget.css("width", "33.33333%");

         break;

       case "small":

         mytarget.css("width", "25%");

         break;

       default:

         break;

     }

   });

 });

</script>

Copy

Preview:

Share:

Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon