SERIES: jQuery/JavaScript Fundamentals
PREREQS: Knowledge of HTML & CSS are beneficial
Using jQuery to Manipulate the DOM and Show, Hide, and Toggle Content
PART 1: jQuery - Show Content
To kick off this series, we are first going to use jQuery.
Okay, okay, I know what you are thinking, “Hey, Ron, why are you covering jQuery? It’s an old language that’s falling to the wayside now since the inception of ES6 and various JS libraries and frameworks!
Well, that’s true, BUT, just because something is older, doesn’t mean it cannot offer a solution to a problem and jQuery does just that. If you are going to be a Web Developer, it’s best to have as many tools in your toolbox as possible!
jQuery is easy to learn, fairly fast, and still relevant these years later.
I like to use jQuery for single page applications, landing pages, funnel pages, etc. It’s quick, easy, reliable, and gets the job done!
Would I use it on some complex web app project?
More than likely no and something like ReactJS, AngularJS, VueJS, NextJS, etc would be more suitable. But those tools we will be discussing down the road in other posts, so stay tuned for that!
Anyway, where was I?
Oh, yes. . .
jQuery reminds me of a song that came out over 20 years ago by David Lee Murphy called, “Dust on the Bottle”!
The song’s chorus goes like this:
… There might be a little dust on the bottle
But don’t let it fool ya about what’s inside
There might be a little dust on the bottle
It’s one of those things that gets sweeter with time
And, this is EXACTLY how I view jQuery, a fine wine that may not be able to offer you ALL the solutions you are looking for, but it sure can satisfy your Web Dev palate when expedience is a necessity on small to medium sized projects!
So, let’s get to learning how we can utilize jQuery to display objects when buttons have been clicked!
1 – WEBSITE
This is what we will be building:
https://creatiquemedia.github.io/CM-GHP-Post-0002-20220817-Show-Hide-Content
2 – HTML
I am not going to cover the HTML here in detail because, well, you should definitely already know that, but if you do not, then I suggest checking out some great free HTML tutorials online, especially the Free Code Camp YouTube site and their website to get started on the basics of web development here:
https://www.freecodecamp.org/news/html-crash-course
BTW, I do plan on putting together “A Complete Beginner’s Guide to Web Dev Fundamentals” sometime in the near future!
So stay tuned!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/main.css" />
<title>Ron The Web Dev - jQuery - Show and Hide Content</title>
</head>
<body>
<h1 class="show--hide--content--heading">
Ron The Web Dev<br>Show and Hide Content Component<br>Using HTML, CSS (following BEM), and jQuery!
</h1>
<section class="show--hide--content--buttons--container">
<button class="show--hide--content--buttons" id="button-1">
Show Content #1
</button>
<button class="show--hide--content--buttons" id="button-2">
Show Content #2
</button>
<button class="show--hide--content--buttons" id="button-3">
Show Content #3
</button>
<button class="show--hide--content--buttons" id="button-4">
Show Content #4
</button>
</section>
<section class="show--hide--content--boxes--container">
<h1
class="show--hide--content--boxes--heading"
id="content-heading"
>
CLICK A BOX ABOVE TO SHOW CONTENT ASSOCIATED WITH THAT BUTTON HERE!
</h1>
<div
class="show--hide--content--boxes__show"
id="content-1"
>
<h2 class="show--hide--content--boxes--text">
Content Box 1
</h2>
</div>
<div
class="show--hide--content--boxes__show"
id="content-2"
>
<h2 class="show--hide--content--boxes--text">
Content Box 2
</h2>
</div>
</div>
<div
class="show--hide--content--boxes__show"
id="content-3"
>
<h2 class="show--hide--content--boxes--text">
Content Box 3
</h2>
</div>
<div
class="show--hide--content--boxes__show"
id="content-4"
>
<h2 class="show--hide--content--boxes--text">
Content Box 4
</h2>
</div>
</section>
<script src="./js/main.js"></script>
<script defer src="https://blog.creatiquemedia.com/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-js-146ee1c193fc6e71f25a0e7bff57b7e8.js"></script></body>
</html>
3 – CSS
The same goes for CSS!
I am not going to cover it here, but again, there are great resources online to help you get started.
For the CSS I created, I, like always, am using the BEM method. If you do not know what the BEM method is, please refer to my previous post here that lists great BEM tutorials:
Create a QR Code Component
If you really want to get a handle on CSS, then I definitely would follow Kevin Powell’s YouTube channel here:
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.show--hide--content--heading {
text-align: center;
margin: 120px 80px 120px 80px;
line-height: 1.5;
}
.show--hide--content--buttons--container {
display: flex;
align-items: center;
justify-content: space-evenly;
}
button {
background-color: orangered;
color: white;
padding: 2%;
border-radius: 8px;
box-shadow: 0.5;
transition: all 0.2s ease-in-out;
cursor: pointer;
text-transform: uppercase;
}
button:hover {
transform: scale(1.1);
}
.show--hide--content--boxes--container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border-top: 2px solid #fe4600;
margin: 80px 0 0 0;
}
.show--hide--content--boxes--heading {
margin: 80px 0 80px 0;
text-align: center;
}
.show--hide--content--boxes__show {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
color: white;
padding: 0 0 10px 10px;
text-align: center;
}
.show--hide--content--boxes--text {
text-align: center;
}
4 – JQUERY
Okay, first let’s go ahead and take a look at some jQuery code that will do EXACTLY what we need. However, we are going to improve it, but before we do, I want you to be able to think about how we can do that as you examine the following code:
// NOT DRY CODE
// Section 1
$("#content-1").hide();
$("#content-2").hide();
$("#content-3").hide();
$("#content-4").hide();
// Section 2
$("#button-1").click(function () {
$(document).on("click", "#button-1", function () {
$("#content-1").fadeIn(3000);
$("#content-heading").hide();
$("#content-1").show();
$("#content-1").css({
padding: "0 0 10px 10px",
"background-color": "darkorange",
width: "100%",
color: "white",
});
});
});
$("#button-2").click(function () {
$(document).on("click", "#button-2", function () {
$("#content-2").fadeIn(3000);
$("#content-heading").hide();
$("#content-2").show();
$("#content-2").css({
padding: "0 0 10px 10px",
"background-color": "blue",
width: "100%",
color: "white",
});
});
});
$("#button-3").click(function () {
$(document).on("click", "#button-3", function () {
$("#content-3").fadeIn(3000);
$("#content-heading").hide();
$("#content-3").show();
$("#content-3").css({
padding: "0 0 10px 10px",
"background-color": "red",
width: "100%",
color: "white",
});
});
});
$("#button-4").click(function () {
$(document).on("click", "#button-4", function () {
$("#content-4").fadeIn(3000);
$("#content-heading").hide();
$("#content-4").show();
$("#content-4").css({
padding: "0 0 10px 10px",
"background-color": "green",
width: "100%",
color: "white",
});
});
});
Again, examine the code above and think about how we can improve it!
Need a hint? [reveal hint here]
All right, all right, if that hint didn’t help and made you even more confused, then let’s just move on to get a more clear conceptualization!
One of the most fundamental aspects of coding is to follow the DRY method!
D = DON’T
R = REPEAT
Y = YOURSELF
Code Comment – Section 1
Okay, so after examining the code above, do you see redundancy anywhere?
Let’s take a look at the very first part of our code under the “// Section 1” comment:
// Section 1
$("#content-1").hide();
$("#content-2").hide();
$("#content-3").hide();
$("#content-4").hide();
$("#content-1, #content-2, #content-3, #content-4").hide();
Now, some folks will be like, “Come on bro, really man? That’s not like, a big difference dude!” Well, okay, you’re right, but what if you’re working on a HUGE project and there are hundreds if not thousands of lines of code? Believe it or not, there are developers out there that do nothing but REFACTOR code all day!!
EWW!
Speed is everything today and SEO rankings depend A LOT on page load speeds! You don’t want your jQuery or JavaScript code to be an unrefactored mess which could be a culprit behind page load latency!
Especially if the jQuery or Javascript hasn’t been MINIFIED!
So, it’s best to ALWAYS try and stay, WHAT?
That’s right, DRY!
Code Comment – Section 2
All righty then, moving on to the “// Section 2” comment of our code we will see the following:
// Section 2
$("#button-1").click(function () {
$(document).on("click", "#button-1", function () {
$("#content-1").fadeIn(3000);
$("#content-heading").hide();
$("#content-1").show();
$("#content-1").css({
padding: "0 0 10px 10px",
"background-color": "darkorange",
width: "100%",
color: "white",
});
});
});
$("#button-2").click(function () {
$(document).on("click", "#button-2", function () {
$("#content-2").fadeIn(3000);
$("#content-heading").hide();
$("#content-2").show();
$("#content-2").css({
padding: "0 0 10px 10px",
"background-color": "blue",
width: "100%",
color: "white",
});
});
});
$("#button-3").click(function () {
$(document).on("click", "#button-3", function () {
$("#content-3").fadeIn(3000);
$("#content-heading").hide();
$("#content-3").show();
$("#content-3").css({
padding: "0 0 10px 10px",
"background-color": "red",
width: "100%",
color: "white",
});
});
});
$("#button-4").click(function () {
$(document).on("click", "#button-4", function () {
$("#content-4").fadeIn(3000);
$("#content-heading").hide();
$("#content-4").show();
$("#content-4").css({
padding: "0 0 10px 10px",
"background-color": "green",
width: "100%",
color: "white",
});
});
});
Again, let’s examine the code above and see how it can be improved.
Do you see redundancy?
Of course you do!
Now, again, how can we refactor our code to make it less redundant?
Well, we can do what we did in “// Section 1“.
Let’s go ahead and work on that now!
For me, the BEST way to start reducing redundancy is to incorporate the use of an attribute selector. If you do not know what an attribute selector is, you should definitely check this out:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Okay, npw that we know what an attribute selector is, let’s get to using it!
$("[id^=button]")
Okay, so here we go!
This attribute selector will select ALL elements with an id that begins with the word “button“. If you look at the HTML code above, you will see that we have 4 of these id’s. So, instead of selecting these id’s individually, we can target all of them with this one simple line of code using the attribute selector.
Cool, right?
Now, after we do that, we want jQuery to listen for any click events that may occur on any of these id’s.
To do that, we will use the following code:
$("[id^=button]").click(function () {
Next, in order to hide the “CLICK A BOX ABOVE TO SHOW CONTENT ASSOCIATED WITH THAT BUTTON HERE!” text, we will use the following code:
$("[id^=button]").click(function () {
$("#content-heading").hide();
Pretty simple huh?
See jQuery isn’t hard!
Okay, now there are different ways of handling this code from here on out! We can use “if/else/else if” statements such as in the following manner:
if (this.id == "button-1") {
$("#content-1").fadeIn(2000);
$("#content-1").css({
"background-color": "darkorange",
});
} else if (this.id == "button-2") {
$("#content-2").fadeIn(2000);
$("#content-2").css({
"background-color": "blue",
});
}
However, I typically will replace nested “if” and “else if” statements that are 4 or more with “switch” and “case” statements.
The reason for this is because I always feel the need, the need for speed!
Hey, thanks Maverick!
So, “switch” statements are faster than “if/else/else if” statements, but that’s typically if there are several nested “if/else/else if” statements. So, this may not do much for speed given there are only 4 statements here, but I stick to my own personal preference for good coding practices. It’s always best to find your own comfort zone with coding and to follow clean KISS (Keep It Simple Stupid) code!
Let’s take a look at our refactored code utilizing “switch” and “case” statements:
switch (this.id) {
case "button-1":
$("#content-1").fadeIn(2000);
$("#content-1").css({
"background-color": "darkorange",
});
break;
case "button-2":
$("#content-2").fadeIn(2000);
$("#content-2").css({
"background-color": "blue",
});
break;
case "button-3":
$("#content-3").fadeIn(2000);
$("#content-3").css({
"background-color": "red",
});
break;
case "button-4":
$("#content-4").fadeIn(2000);
$("#content-4").css({
"background-color": "green",
});
break;
}
});
See how clean that code looks?
This is why I LOOOOOVE swtich and case statemens!
Having too many if/else/else if statements eventually will make your code harder to follow and read, even with comments and it will slow your script down and that ain’t no good for SEO son!
PUTTING IT ALTOGETHER!
Here is the complete newly refactored jQuery code that we will be using that follows the aforementioned DRY method:
// **** Good Version - Shorter code that follows DRY ****
// Post Article Section - 1
// Hide all content boxes on page load
$("#content-1, #content-2, #content-3, #content-4").hide();
// Post Article Section - 2
// BEST Version - Show content boxes - Using Switch/Case statements
$("[id^=button]").click(function () {
$("#content-heading").hide();
// Post Article Section - 3
switch (this.id) {
case "button-1":
$("#content-1").fadeIn(2000);
$("#content-1").css({
"background-color": "darkorange",
});
break;
case "button-2":
$("#content-2").fadeIn(2000);
$("#content-2").css({
"background-color": "blue",
});
break;
case "button-3":
$("#content-3").fadeIn(2000);
$("#content-3").css({
"background-color": "red",
});
break;
case "button-4":
$("#content-4").fadeIn(2000);
$("#content-4").css({
"background-color": "green",
});
break;
}
});
What’s Next?
Stay tuned for the upcoming, “PART 2: jQuery – Hide Content” post. However, you may be able to figure this out on your own, right?
If not, no worries, we will cover it together!
5 – GITHUB REPO
6 – CONCLUSION
Hey!
I appreciate you stopping by and checking out our blog!
If you’re looking for a personal or business website, contact us today and let us know how we can help!
Contact us here: https://CreatiqueMedia.com/#ContactOR
Call us at: 405-831-3048Until next time, HAPPY CODING y’all!
Please connect with us on social media here:
CreatiqueMedia LLC
- Instagram: https://www.instagram.com/CreatiqueMedia
- Twitter: https://twitter.com/CreatiqueMedia1
- CodePen: https://codepen.io/CreatiqueMedia
Ron The Web Dev
- Facebook: https://www.facebook.com/RonTheWebDev