We Keep Coding

Incorporate a function for all the buttons with specific class using vanilla JS

I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
//jshint esversion: 6
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
var numberOfbuttons = document.querySelectorAll(".r").length;
console.log(numberOfbuttons);
for (i = 0; i < numberOfbuttons; i++) {
document.querySelectorAll(".r")[i].onmouseover = function() {
mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function() {
mouseOut([i]);
};
}
function mouseOut(key) {
document.querySelectorAll(".r")[key].style.opacity = 0;
}
function mouseOver(key) {
document.querySelectorAll(".r")[key].style.opacity = 1;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg4.jpg);
background-size: cover;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
span {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
h1 {
/* width: 580px; */
font-family: 'Sofia', cursive;
font-size: 3.4rem;
text-align: center;
margin: 10px auto;
padding-top: 15px;
padding-bottom: 15px;
}
h2 {
font-family: 'Sofia', cursive;
font-size: 2rem;
}
#btn1 {
opacity: 0;
}
#btn2 {
opacity: 0;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
}
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
#no2 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
#no3 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 8px;
}
#no4 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.container2 {
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container3 {
width: 1100px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container4 {
width: 1300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
.white_bg {
background-color: white;
}
.container1_row4 {
display: flex;
justify-content: center;
margin-left: 240px;
position: relative;
right: 10px;
}
.container2_row4 {
display: flex;
justify-content: center;
margin-left: 35px;
margin-right: 150px;
position: relative;
right: 25px;
}
.container3_row4 {
display: flex;
justify-content: center;
margin-right: 240px;
}
.level1 {
height: 3px;
width: 110px;
border-style: hidden solid solid solid;
border-width: thick;
margin-left: 230px;
}
.oblique1 {
width: 88px;
transform: rotate(-30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique2 {
width: 88px;
transform: rotate(30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique_row {
display: flex;
margin-left: 200px;
margin-top: 17px;
}
.line_container2 {
display: flex;
}
.first_arrow_row2 {
position: relative;
right: 125px;
}
.second_arrow_row2 {
position: relative;
right: 150px;
}
.second_arrow_row2>.oblique_row>.oblique1 {
border-style: hidden;
}
.line_container3 {
display: flex;
}
.line2 {
width: 45px;
transform: rotate(90deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.first_arrow_row3 {
position: relative;
right: 165px;
}
.second_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.second_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.first_arrow_row3>.oblique_row {
position: relative;
right: 25px
}
.first_arrow_row3>.level1 {
position: relative;
left: 60px
}
.first_arrow_row3>.oblique_row>.oblique1 {
width: 155px;
transform: rotate(344deg);
}
.first_arrow_row3>.oblique_row>.oblique2 {
width: 155px;
transform: rotate(16deg);
}
#datetime {
text-align: center;
}
<link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
<div class="container1">
<h1>_ _ _ Family tree _ _ _</h1>
<div id="no1">
<div class="tree homer">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
<span>
Homer Simpson
</span>
</div>
<div class="tree marge">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
<span>
Marge Simpson
</span>
</div>
</div>
<div class="line_container1">
<div class="level1"></div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
<div class="container2">
<div id="no2">
<div class="tree">
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<button id="btn3" class="refresh r"></button>
<span>
Bart Simpson
</span>
</div>
<div class="tree">
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<button id="btn4" class="refresh r"></button>
<span>
Lisa Simpson
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<button id="btn5" class="refresh r"></button>
<span>
Abraham Simpson
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<button id="btn6" class="refresh r"></button>
<span>
Maggie Simpson
</span>
</div>
</div>
<div class="line_container2">
<div class="first_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
</div>
<div class="container3">
<div id="no3">
<div class="tree">
<img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
<button id="btn7" class="refresh r"></button>
<span>
Ned Flanders
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
<button id="btn8" class="refresh r"></button>
<span>
Elizabeth Hoover
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
<button id="btn9" class="refresh r"></button>
<span>
Seymour Skinner
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
<button id="btn10" class="refresh r"></button>
<span> Edna Krabappel
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
<button id="btn11" class="refresh r"></button>
<span>
Barney Gumble
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
<button id="btn12" class="refresh r"></button>
<span>
Selma Bouvier
</span>
</div>
</div>
<div class="line_container3">
<div class="first_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="line2"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
<div class="third_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
</div>
</div>
<div class="container4">
<div id="no4">
<div class="container1_row4">
<div class="tree">
<img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
<button id="btn13" class="refresh r"></button>
<span>
Kent Brockman
</span>
</div>
<div class="tree">
<img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
<button id="btn14" class="refresh r"></button>
<span>
Mayor Quimby
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
<button id="btn15" class="refresh r"></button>
<span>
Sideshow Bob
</span>
</div>
</div>
<div class="container2_row4">
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
<button id="btn16" class="refresh r"></button>
<span>
Clancy Wiggum
</span>
</div>
</div>
<div class="container3_row4">
<div class="tree">
<img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
<button id="btn17" class="refresh r"></button>
<span>
Nikki McKenna
</span>
</div>
<div class="tree">
<img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
<button id="btn18" class="refresh r"></button>
<span>
Milhouse Van Houten
</span>
</div>
</div>
</div>
</div>
<div class="datetime">
<h2 id="datetime"></h2>
</div>
<!-- script loaded here -->
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')

your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)
and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);
Probably if you convert the NodeList to a proper Array the code is cleaner and less prone to errors. something like:
Array.from(document.querySelectorAll(".r"))
.forEach(el => {
// I'd rather user el.addEventListener("mouseover",...
el.onmouseover = () => el.style.opacity = 0;
el.onmouseout = () => el.style.opacity = 1;
});

Repeating the same action on multiple elements

So I've got some code for a drop-down infobox and it has some Javascripts attached to it. It works perfectly but I'm now trying to duplicate it for a second box below, but I'm getting a few bugs.
In order to duplicate this, do I just copy and paste the script and HTML and change:
handleClick() to handleClick2()
drop_down to drop_down2
product_section to product_section2
or is there an easier way to attaching the same Javascript to two boxes?
var show = false;
const handleClick = () => {
const element = document.querySelector(".drop_down");
const product = document.querySelector(".product_section");
if (!show) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show = false;
}
};
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down" onclick="handleClick()">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
body {
box-sizing: border-box;
background-color: #f7f7f7;
font-family: montserrat, sans-serif;
}
.box {
position: relative;
width: 80vw;
margin: 0 auto;
display: flex;
justify-content: space-around;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgba(78, 137, 175, 0.15);
line-height: 28px;
font-size: 20px;
text-align: left;
}
.ranked {
position: absolute;
left: -25px;
top: -25px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.badge_one {
width: 52px;
height: 52px;
background-color: #00113d;
border-radius: 50%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.badge_two {
width: 82px;
height: 32px;
background-color: #e7cd60;
border-radius: 20px;
margin-right: 5px;
margin-left: -20px;
color: black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
font-size: 12px;
text-align: center;
padding-left: 10px;
}
.product_image {
width: 160px;
height: 100px;
padding: 40px 20px;
}
.overview_section {
display: flex;
flex-direction: column;
justify-content: center;
width: 55%;
}
.title {
color: #8f2e53;
margin-bottom: 10px;
cursor: pointer;
}
.title:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.company {
color: #001143;
font-weight: 700;
margin-bottom: 15px;
cursor: pointer;
}
.company:hover {
color: #4a90e2;
transition: all 0.4s ease-in-out;
}
.hide { display: none;
}
.drop_down {
font-size: 18px;
font-weight: 500;
color: #8f2e53;
margin-top: 5px;
cursor: pointer;
text-transform: capitalize;
}
.drop_down:hover {
text-decoration-color: #e7cd60;
}
.price_section {
border-left: 1px solid rgba(78, 137, 175, 0.15);
width: 30%;
/* min-width: 130px; */
margin-left: 25px;
display: flex;
flex-direction: column;
margin-top: 5px;
}
.section_one,
.section_two {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.price {
font-size: 35px;
font-weight: 500;
line-height: 35px;
color: #78c02a;
margin-bottom: 0;
}
.price span {
font-size: 25px;
font-weight: 100;
padding-left: 5px;
}
.btn_block {
width: 100%;
padding: 0 20px;
margin: 10px 0;
text-align: center;
}
.btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 18px 60px;
cursor: pointer;
}
.btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.btn:focus {
outline: 0;
}
.btn_label {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.35px;
text-transform: uppercase;
}
.info_one {
color: #999;
cursor: pointer;
font-family: noto sans, sans-serif;
font-size: 14px;
margin-top: 5px;
text-transform: capitalize;
}
.info_two {
color: #17baef;
text-decoration: none;
}
.product_section {
display: none;
width: 81vw;
margin: 0 auto;
border-radius: 4px;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);
}
.product_info {
border-top: 2px solid #e7cd60;
padding: 25px 50px 25px 70px;
background-color: #e9f5fd;
}
.heading {
font-weight: 500;
font-family: montserrat, sans-serif;
padding: 10px 0;
color: #00113d;
text-transform: capitalize;
font-size: 22px;
}
.features {
color: #00113d !important;
list-style: none;
}
.feature_item {
line-height: 1.5;
font-weight: 300;
font-family: montserrat, sans-serif;
margin: 20px 0;
font-size: 16px;
cursor: pointer;
}
.feature_item:hover {
color: #638043;
transition: all 0.3s ease-in-out;
}
.feature_item i {
color: #78c02a;
}
.divider {
width: 100%;
height: 1px;
margin: 25px 0;
background-color: #e9e9e9;
}
.deals {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
margin-top: 10px;
}
.deal_item {
display: flex;
flex-direction: column;
align-items: center;
}
.product_logo {
max-width: 70px;
max-height: 40px;
}
.product_price {
height: 40px;
display: flex;
line-height: 1.1;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin: 20px 0;
font-family: "Montserrat", sans-serif;
}
.product_price small {
margin: 0 auto;
font-size: 12px;
}
.product_btn {
color: #ffffff;
background-color: #78c02a;
border: none;
text-transform: uppercase;
border-radius: 6px;
padding: 15px;
cursor: pointer;
}
.product_btn:hover {
background: #92e879;
transition: all 0.4s ease-in-out;
}
.product_btn:focus {
outline: 0;
}
#media only screen and (max-width: 776px) {
.box {
width: 90vw;
position: relative;
flex-direction: column;
margin: 0px auto;
}
.ranked {
left: 15px;
top: 15px;
}
.product_image {
align-self: flex-end;
}
.company {
order: -1;
}
.price_section {
width: 100%;
margin-left: 0px;
}
.section_one {
flex-direction: row;
justify-content: space-between;
padding-left: 10px;
}
.section_two {
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 10px;
}
.info_one {
visibility: hidden;
}
.info_two {
font-size: 15px;
}
.btn_block {
/* width: 40% !important; */
width: 40vw;
}
.btn {
padding: 9px 30px;
}
.overview_section {
width: 100%;
margin: 0 10px;
}
.drop_down {
width: 90vw;
position: absolute;
bottom: -45px;
left: 0;
padding: 10px;
text-align: center;
background-color: #e9f5fd;
color: #1f1740;
font-weight: 900;
text-transform: uppercase;
}
.product_section {
width: 93vw;
}
.product_info {
padding: 20px 5px;
}
.heading {
padding: 10px 0 5px 0px;
font-size: 20px;
}
.features {
margin-left: 5px;
}
.feature_item {
margin: 10px 0;
font-size: 14px;
}
.divider {
margin: 15px 0;
}
.deals {
margin-top: 5px;
}
.product_logo {
max-width: 60px;
max-height: 30px;
margin-top: 5px;
}
.product_price {
font-size: 16px;
margin: 10px 0;
}
.product_btn {
padding: 10px 10px;
}
}

You need to delegate from the outer container
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("drop_down")) {
e.preventDefault();
const parent = tgt.closest(".box").parentNode; // or give the <div style="margin-top: 50px"> a class
const element = parent.querySelector(".drop_down");
const product = parent.querySelector(".product_section");
product.classList.toggle("hide")
element.innerHTML = product.classList.contains("hide") ? `more info <i class="fas fa-angle-down"></i>` :`close <i class="fas fa-angle-up"></i>`;
}
})
.hide { display:none; }
<div id="container">
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section hide">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="#" class="drop_down">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>

Here's a basic concept without the use of inline JavaScript on* handlers.
Use the ::after pseudo to style your buttons
Use a state class like .is-active to style the active button
Use a utility class like .u-none to hide the element
Use data-* attribute to store into it the desired target selector
Use JavaScript .addEventListener() and .classList.toggle()
document
.querySelectorAll('[data-toggle]')
.forEach( btn =>
btn.addEventListener('click', ev =>
{
ev.preventDefault()
const el = ev.currentTarget
, target = el.dataset.toggle
;
el.classList.toggle('is-active')
document.querySelector(target).classList.toggle('u-none')
}
)
)
[data-toggle] {
cursor: pointer;
}
[data-toggle]::after {
font-family: "Font Awesome 5 Free";
font-weight: 900; /* Needed for Font Awesome to work */
content: "\f107";
padding-left: 5px;
}
[data-toggle].is-active::after {
content: "\f106";
}
/* Utility classes */
.u-none {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<a data-toggle="#product_23">More info</a>
<div id="product_23" class="u-none">Product section.....</div>

I would pass an argument id to handleClick and use it like :
"drop_down"+id and "product_section"+id
and call handleClick(1) or handleClick(2)
you'd have to copy-paste the html though.
I hope it helped ^^
Edit :
I'll try to make it more clear and make it look less like a comment.
Explaination:
My suggestion is to make the handleClick() not a function that is unique to one element but make it so that it can depends on multiple elements.
But how?
Well I first changed the var show = false (lign 1) to a var show = [] to make it a set of states instead of a state (one state per element).
I then added an argument named a in the handleClick() giving me const handleClick = (a) => {...}. This a will be the id of the element we want to change.
I then add my a to the selected classes: const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
I change the classes names and function accordingly to the previous step:
<a href="#" class="drop_down drop_down1" onclick="handleClick(1)"> //lign 17
<div class="product_section1"> //lign 41
We now change all the show to show[a] in the javascript file
Conclusion and final code
You'd want to make the href="" so it doesn't go up when you click. So here you go I hope it helped ^^
index.html
<div style="margin-top: 50px">
<div class="box">
<div class="ranked">
<div class="badge_one">
<h2>1</h2>
</div>
<div class="badge_two">
<p>16% off</p>
</div>
</div>
<img src="https://m.media-amazon.com/images/I/41HiQaqjI-L.jpg" alt="product" class="product_image" />
<div class="overview_section">
<p class="title">
Panasonic Lumix DMC-TZ57EB-K Compact Digital Camera - Black (16 MP, 20x Optical Zoom)
</p>
<p class="company">Panasonic</p>
<a href="" class="drop_down1" onclick="handleClick(1)">
More info <i class="fas fa-angle-down"></i>
</a>
</div>
<div class="price_section">
<div class="section_one">
<p class="price">
9.9
<span>
<i class="fas fa-check"></i>
</span>
</p>
<div class="btn_block">
<button class="btn">
<span class="btn_label">view product</span>
</button>
</div>
</div>
<div class="section_two">
compare price (2)
Buy it on Amazon
</div>
</div>
</div>
<div class="product_section product_section1">
<div class="product_info">
<p class="heading">product hightlights</p>
<ul class="features fa-ul">
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
20x optical zoom lens (24-480mm) with 40x intelligent zoom
</span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 25p mp4 full hd video recording </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span> 16 megapixel 1/2 33" high sensitivity mos sensor </span>
</li>
<li class="feature_item">
<i class="fa fa-check-circle"></i>
<span>
3" 1040k-dot lcd with 180 tilting lcd for self shooting
</span>
</li>
</ul>
<div class="divider"></div>
<div class="heading">
<span>More deals</span>
</div>
<div class="deals">
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
<div class="deal_item">
<img src="https://s3.amazonaws.com/comparaboo/partners/amazon.png" alt="company_logo" class="product_logo" />
<div class="product_price">
£165.00
<small>New</small>
</div>
<button class="product_btn">
<span class="product_btn_label">view product</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
index.js
var show = [];
const handleClick = (a) => {
const element = document.querySelector(".drop_down"+a);
const product = document.querySelector(".product_section"+a);
if (!show[a]) {
element.innerHTML = `close <i class="fas fa-angle-up"></i>`;
product.style.display = "block";
show[a] = true;
} else {
element.innerHTML = `more info <i class="fas fa-angle-down"></i>`;
product.style.display = "none";
show[a] = false;
}
};

footer with background image half in it

I have designed a footer for a website using Figma which looks like the image provided below:
see design Picture below
design image
Added working example
#f-text{
font-size: 14px;
color: #ffffff;
}
#footer-head{
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text{
color: #818181;
font-size:17px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer mt-5" style="width:100%; padding-top: 100px; padding-bottom:40px; margin-top: 75px; position:absolute; background-color: #0C0C0C">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</footer>
I need help with turning my design into working code.

Since you need the "background-image" to extend beyond the footer you cannot use background-image property on the footer itself.
Use a pseudo-element absolutely positioned and place the background image on that.
E.g.
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: flex-end;
}
footer {
margin: 0 auto;
position: relative;
width: 80%;
height: 50vh;
background: black;
}
footer::after {
content: "";
width: 20vw;
height: 20vw;
background-image: url(http://www.fillmurray.com/460/460);
background-size: contain;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
z-index: -1
}
<footer>
</footer>

#f-text {
font-size: 14px;
color: #ffffff;
}
#footer-head {
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text {
color: #818181;
font-size: 17px;
}
footer {
position: relative;
}
.footer-main {
width: 90%;
padding-top: 100px;
padding-bottom: 40px;
margin-top: 75px;
background-color: #0C0C0C;
}
.img-styling {
position: absolute;
right: 0;
top: 35px;
z-index: -1;
width: 30%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<div class="footer-main">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</div>
<img class="img-styling" src="https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2014/materialdesign_principles_metaphor.png" alt="image" />
</div>

How to center a div vertically and horizontally with a checkbox on the top corner of parent div

I am developing an application using VueJS and Bootstrap. I am trying to center a div with an image and at the same time have the checkbox label appear on the top right like this.
But when hovered over the card, the image moves slightly towards it's left, like this:
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
<div v-for="(item, index) in recentFiles" #mouseover="showByIndexRecent = index" #mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
<stats-card>
<div slot="header" class="header-rectangle" >
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div>
<label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="margin-top: 8px;float: right;margin-right: 10px;margin-left: 0px;">
<input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
<i class="form-icon">
</i>
</label>
</div>
<div style="margin-left: 25px;">
<img :src="item.source" style=" height: 50px; margin-top: 50px">
</div>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div class="row" >
<div class="col-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{item.name}}</span>
</div>
<div class="file-size-style" >
<span>{{item.size}} MB</span>
</div>
</div>
<div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>
How to make sure that the div with the image appears center vertically and horizontally with the checkbox aligned to the top right?
I'd love some help on it. Thanks in advance.

You can use bootstrap classes like d-flex, align-items-center, justify-content-center in the image div to center it horizontally and vertically. To position the checkbox at top right, you should add position-relative class in the header-rectangle. In the label you should add style as position: absolute; top: 0; right: 10px, based on your output you can make some little changes to top and right properties values.
<div v-for="(item, index) in recentFiles" #mouseover="showByIndexRecent = index" #mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
<stats-card>
<div slot="header" class="header-rectangle position-relative" >
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div>
<label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="position: absolute; top: 0; right: 10px">
<input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
<i class="form-icon">
</i>
</label>
</div>
<div class="d-flex align-items-center justify-content-center">
<img :src="item.source" style=" height: 50px;">
</div>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
<!-- #contextmenu.prevent="$refs.menu.open" -->
<div class="row" >
<div class="col-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{item.name}}</span>
</div>
<div class="file-size-style" >
<span>{{item.size}} MB</span>
</div>
</div>
<div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>

FTScroller - not fixing scroll to the bottom

On my project I have a list of items with FTScroller plugin implemented. However when I scroll to the bottom of this list, the scroll don't fixes on that position.
How can I solve this? What I'm doing wrong?
HTML
<div class="container">
<div id="boxesScroll">
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">A</span>
</div>
<div class="box-count">
<span class="description">Item A</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">B</span>
</div>
<div class="box-count">
<span class="description">Item B</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">C</span>
</div>
<div class="box-count">
<span class="description">Item C</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">D</span>
</div>
<div class="box-count">
<span class="description">Item D</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">E</span>
</div>
<div class="box-count">
<span class="description">Item E</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">F</span>
</div>
<div class="box-count">
<span class="description">Item F</span>
</div>
</div>
<div class="boxItem">
<div class="box-icon">
<span class="roundedDescIcon">G</span>
</div>
<div class="box-count">
<span class="description">Item G</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
var scrollBehaviours = {
scrollingY: true,
scrollingX: false,
alwaysScroll: true,
scrollbars: true
};
var scrollerPartidos = new FTScroller(document.getElementById('boxesScroll'), scrollBehaviours);
});
CSS
.container
{
width: 195px;
display: inline-block;
vertical-align: top;
height: 200px;
position: relative;
overflow: hidden;
white-space: nowrap;
float: initial;
background: lightblue;
}
#boxesScroll
{
position: absolute;
overflow: hidden;
width: 100%;
}
.boxItem
{
float: initial;
border: 0px!important;
display: block;
padding: 15px;
background: white;
margin: 10px;
cursor: pointer;
}
.boxItem .box-icon {
float: left;
padding-top: 5px;
}
.boxItem .box-icon span.roundedDescIcon {
padding: 8px;
border-radius: 50%;
border: 1px solid #ced5de;
background: #f7f9fb;
}
.boxItem .box-count {
padding: 0px 10px;
width: calc(100% - 50px);
display: inline-block;
vertical-align: top;
}
.boxItem .box-count .description {
font-size: 17px;
line-height: 30px;
vertical-align: middle;
float: left;
width: 100%;
}
.ftscroller_scrollbary,
.ftscroller_scrollbarx {
-moz-opacity: .2;
-khtml-opacity: .2;
-webkit-opacity: .2;
opacity: .2;
-ms-filter: alpha(opacity=.2 * 100);
filter: alpha(opacity=.2 * 100);
}
JSFiddle example

You need the height in ftscroller element
#boxesScroll
{
width: 100%;
height: 200px;
position: absolute;
overflow: hidden;
}