this:

On the last page, we mentioned this, but lets delve further into it. Below, se have two "Ipsun" paragraphs:

We can write jQuery to make the text in the columns disappear, but if we do so, both columns will disappear. So, the this command allows us to make just one column disappear (click the "Ipsun" text above):

Notice that we have used a slideToggle() command, but there is no way to get the text to toggle back!

We can also change the styling of the element using this:

Or add a class using this:

But using this in this way, we cannot select the element desired from a different element. So, we have to assign variables, classes and .on().

Below, we have 9 boxes, each numbered either 1, 2 or 3. Each of them has two class names, the first of which is .box and the second is either .one, .two or .three.

We want to change the color for each box with the same number class:

From here, we define our jQuery as such:

Click the boxes to see the code work.

Why do we use .on("click") instead of .click()?

.on("click") allows us to delegate another element.

We use this to tell the code only to execute on a certain element.

We assign the variable boxes to be the second class (that is, .one etc) by using the .attr("class") and .split(" ") command. (Remember, as they have been assigned as a variable, they are strings within an [array]:

We are selecting the second string by calling its index number [1].)

We tell the code to attach a . to turn the string into a class, and then assign that class its CSS styling.

But if we want only a certain class to change color, in other words, for the other classes to remain or change back to their original color, we do the following:

See within the code block for the explanation of the code.

Knowing now how we can use this, and variables, we can now write some code to change the terrible navbar, to make it work as I wish it to - with the submenus apperaing and disappearing under the menus on smaller screens.