Streaming live at 10am (PST)

Dram's simple add-remove class tutorial

#1

This is the a very simple tutorial inspired by my mate @Keejo question he recently asked me: how would I go about changing some properties of the elements that are not supported by interactions?

I had an answer to that, but then I realized that it may be a useful quality-of-life little hack for everyone to learn to be able to fix one of the most glaring problems of IX - the fact that it won’t allow us to target and affect every property of the elements.

Obviously this is not going to replace interactions at all, but what we are going to achieve is to get an ability to change any element’s property with some action from us or our users, be it click or hover or something else.

I know that many of you already use this hack because I stumbled upon mentions of it here and there on the forums, but still decided to create a stand-alone little novice tutorial to make it easier to find and implement step-by-step.

OK, so here is the idea: imagine that we could take any property from the style panel in the designer (or even any property from the CSS specifications), and somehow add it to our element with some action (for simplicity we will be talking about “clicks” here). So we click something and we add modified property. We usually do this with interactions, but sometimes things we want to change are simply not there.

We will do as follows:

  • create an object with the necessary style change
  • add the class of that object to any element effectively modifying that element’s properties
  • learn how to create more complex triggers then simple toggles

Alright here we go! Our tutorial task is to create a way to switch between left- right- and center-aligned text in some div with buttons.

Here is a clonable project to see it in action.

Setting up our scene

Now depending on our task we may set things up differently but for our tutorial we will need to make sure to put everything that we want affected by our text alignment change into one div so that we may later target only that div and not several separate objects. We will call the wrapper divs that we will target wrapper1 and wrapper2.

In the tutorial project you may see two blocks of buttons and text. We will use the first one to create a simple toggle, and second one to create more complex system of switches.

Creating objects with the desired modified property

The beauty of our approach is that we won’t need to add any custom <style></style> into our custom code area and will simply use Designer to create necessary classes.

Anywhere on the canvas create a set of empty divs and call them alignment-right, alignment-left, and alignment-center. The names provide a hint as to what do they do. And that should be the only modified property on those objects.

21%20PM 54%20PM 11%20PM

Creating a toggle

Now what we need is to make our first toggle button to switch our text content underneath between left- and right aligned text direction.

We will use three jQuery methods for this (since Webflow has jQ by default we won’t need to use pure JavaScript and that will make things simpler for us): toggleClass, addClass, and removeClass.

For our first task we will use the toggleClass() method. This method adds and then removes specific class on trigger.

This is what should go into our “Before </body> tag” custom code field (everything in this field should be surrounded by <script></script> tags):

$(document).ready(function(){
  $("#toggle").click(function(){
    $(".wrapper1").toggleClass("alignment-right");
  });
});

We targeted #toggle button and told it to toggle a class of alignment-right (since by default we have our alignment set up to start from left already) on click.

Check the published result for the sweet toggleness!

Creating a more complex set of triggers

Now making several buttons do stuff to our elements is trickier. We cannot just toggle one class, we need to make sure that the class we are adding is the only class (from our list of auxiliary classes with modified parameters) the affected element has.

Here is what we need to add into our custom code:

$(document).ready(function(){
  $("#left").click(function(){
    $(".wrapper2").removeClass("alignment-right alignment-center").addClass("alignment-left");
  });
    $("#right").click(function(){
    $(".wrapper2").removeClass("alignment-left alignment-center").addClass("alignment-right");
  });
    $("#center").click(function(){
    $(".wrapper2").removeClass("alignment-left alignment-right").addClass("alignment-center");
  });
});

We are creating three different rules for three buttons. Each rule makes sure to add a certain class and, at the same time, to remove two other conflicting classes.

Check out the published results for the glorious mother of switches!

That was easy, right? I mean, this is one of the simpler hacks there is but it can be very useful. Again the click trigger can be changed to any other if necessary.

Have fun with Webflow guys!

3 Likes