How to fix the unusual webpage behaviour - multiple btn active of “portfolio”

Question

I'm facing a problem in fixing up this unusual web page behavior. I have included Github page link. On removing nav tag the problem gets solved. But I need the nav tag.

I tried deleting the nav element from dev console and found the nav tag is effecting the below section "workshop_intro".

Here is the Github page link: https://sarang13579.github.io/expt/

Github code: https://github.com/sarang13579/expt

<section class="workshop_intro">
<div class="container py-2">
  <h1 class="py-4"><strong>Gallery</strong></h1>
  <p>Cut and Engraved products range</p>

  <h2>PORTFOLIO</h2>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
    <button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
    <button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
    <button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
  </div>

I expect the portfolio section "workshop_intro" button to highlight one at a time without removing nav tag.

Answer 1

The issue could be due to presence of another HTML element with the "active" class. the query document.getElementsByClassName("active"); is returning the li element from the nav bar

<li class="nav-item active"> <a class="nav-link px-5" href="index.html">Home</a> </li>

To select the button more accurately you can use document.querySelector(".btn.active");

Below is the working code

 filterSelection("all") // Execute the function and show all columns function filterSelection(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected for (i = 0; i < x.length; i++) { w3RemoveClass(x[i], "show"); if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); } } // Show filtered elements function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) { element.className += " " + arr2[i]; } } } // Hide elements that are not selected function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function(){ var current = document.querySelector(".btn.active"); current.classList.remove("active"); this.classList.add("active"); }); } 

 .main { max-width: 1000px; margin: auto; } h1 { font-size: 50px; word-break: break-all; } .row { margin: 8px -16px; } /* Add padding BETWEEN each column (if you want) */ .row, .row > .column { padding: 8px; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; display: none; /* Hide columns by default */ } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: white; padding: 10px; } /* The "show" class is added to the filtered elements */ .show { display: block; } /* Style the buttons */ .btn { border: none; outline: none; padding: 12px 16px; background-color: white; cursor: pointer; } /* Add a grey background color on mouse-over */ .btn:hover { background-color: #ddd; } /* Add a dark background color to the active button */ .btn.active { background-color: #666; color: white; } body, html { font-family: 'Open Sans', sans-serif; height: 100%; overflow-x:hidden; scroll-behavior: smooth; } * { margin: 0; padding: 0; } .row{ margin: 0; } /*HEADER*/ /* Header Section */ .intro { display: table; width: 100%; min-height: 88vh; padding: 0; background: url(../images/tooplate_middle_alt2.png) top center no-repeat; background-color: #f6f6f6; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .intro .fa { font-size: 94px; margin-bottom: 40px; color: #fff; } .intro h3 { color: #fff; font-size: 45px; font-weight: 700; margin-top: 0; margin-bottom: 10px; text-transform: uppercase; } .intro p { color: #fff; font-size: 22px; margin-top: 20px; line-height: 28px; margin-bottom: 40px; } .intro .btn-custom { border-top: 1px solid rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.4); } header .intro-text { margin-top: 100px; margin-bottom: 100px; text-align: center; background-color: rgba(0,0,0,0.5); padding: 25px 25px; } .intro-text i{ color: white; /*size: 20px;*/ } .intro-text a{ cursor: pointer; /*transition: all 0.9s; transition-property: all; transition-duration: 0.9s; transition-timing-function: ease; transition-delay: 0s;*/ } /*GRID - SECTION*/ .grid-list{ padding-top: 25px; padding-bottom: 25px; } .r1 { margin-bottom: 25px; } .r2{ margin-bottom: 25px; } .round img { position: relative; width: 165px; height: 165px; border-radius: 50%; border: 10px solid rgba(0,0,0,0.1); } .more{ cursor: pointer; } .updates{ padding: 50px 0 50px 0; background: #f6f6f6; } .update{ padding: 20px 0 20px 0; } .partners{ padding: 20px 0 20px 0; } .thumbnail{ max-height: 100%; max-width: 100%; object-fit: cover; margin: 10px 0 10px 0; } /*FOOTER*/ footer { background: #333; width: 100%; /*padding: 30px 0 20px;*/ } footer .container{ padding: 30px 0 20px; } footer .social ul li { display: inline-block; padding: 0 20px; } footer p { color: #666; font-size: 15px; } .company{ padding-top: 25px; } .title { color: grey; } .round2 img { position: relative; max-width: 65%; height: auto; border-radius: 50%; border: 10px solid rgba(255,255,255,0.1); } .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } .blg_img img { width: 100%; padding: 20px; height:auto; object-fit: cover } .blg_img2 img { width: 100%; padding: 20px; height:200px; object-fit: cover } .span4 img { margin-right: 15px; } .span4 .img-left { float: left; } .span4 .img-right { float: right; } .contact{ padding: 50px 0; } .our_company{ padding: 0 15px; } .products{ } .blog{ margin: 25px 0; } /*Laser technology*/ .pimg img{ width: 100%; } .laser_page h1{ color: #007BFF; } .product-detail ul li { display: inline-block; background-color: #f9f9f9; border: none; margin: 8px 15px; } .product-detail ul li a { text-align: left; font-size: 12px; color: #6d7a83; line-height: 16px; text-decoration: none; padding: 10px 10px; } .laser_tech .carousel-caption { bottom: auto; top: -10px; right: -125px; } .laser_tech .carousel h5{ color: #007bff; font-weight: bolder; font-size: 20px; } .laser_tech .carousel-indicators li{ background-color: #007bff; } .laser_tech .carousel-control-next-icon{ background-color: #000; } .laser_tech .carousel-control-prev-icon{ background-color: #000; } .laser_page .card{ padding: 15px 0; margin: 15px 0; } .laser_page .card-img-top { height: 145px; } .laser_page .card-body .btn-primary{ bottom: 0; } .CO2 h2{ color: #007BFF; } .CO2 img, .fiber img, .marking img{ max-height: 260px; max-width: 330px; } .fiber h2{ color: #007BFF; } .sz{ font-size: 12px; } .marking h2{ color: #007BFF; } /*Laser workshop*/ .workshop_intro h1{ color: #007BFF; } .laser_work .card{ padding: 15px 0; margin: 15px 0; } .laser_work .card-img-top { height: 180px; } .laser_work .card-body .btn-primary{ bottom: 0; * { box-sizing: border-box; } 

 <!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/portfolio.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body class="d-flex flex-column" style="min-height: 100vh"> <main class="flex-fill"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img src="images/tooplate_logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link px-5" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link px-5" href="about.html">About Us</a> </li> <li class="nav-item"> <a class="nav-link px-5" href="blog.html">Blogs</a> </li> <!-- <li class="nav-item"> <a class="nav-link px-5" href="products.html">Products</a> </li> --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle px-5" href="products.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <!-- <div class="dropdown-divider"></div> --> <a class="dropdown-item" href="products.html">Products Page</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="laser_technology.html">Laser Technology</a> <a class="dropdown-item" href="instruments.html">Instruments</a> <a class="dropdown-item" href="laser_workshop.html">Laser Job Shop</a> <a class="dropdown-item" href="service.html">Service</a> </div> </li> <li class="nav-item"> <a class="nav-link px-5" href="contact.html">Contact</a> </li> </ul> </div> </nav> <!-- Laser Technology --> <!-- <section class="laser_tech"> <div class="container"> <h1 class="py-4">Laser Job Shop</h1> <div class="row py-4"> <div class="col-md-6"> <div class="round"> <div class="fakeimg">Fake Image</div> </div> </div> <div class="col-md-6"> <div class="round"> <div class="fakeimg">Fake Image</div> </div> </div> </div> </div> </section> --> <!-- Laser Workshop --> <section class="workshop_intro"> <div class="container py-2"> <h1 class="py-4"><strong>Gallery</strong></h1> <p>Cut and Engraved products range</p> <h2>PORTFOLIO</h2> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button> <button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button> <button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button> <button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button> </div> <!-- Portfolio Gallery Grid --> <div class="row"> <div class="column wood"> <div class="content"> <img src="images/mountains.jpg" alt="Mountains" style="width:100%"> <h4>Mountains</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column wood"> <div class="content"> <img src="images/lights.jpg" alt="Lights" style="width:100%"> <h4>Lights</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column wood"> <div class="content"> <img src="images/nature.jpg" alt="Nature" style="width:100%"> <h4>Forest</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column stone"> <div class="content"> <img src="images/cars1.jpg" alt="Car" style="width:100%"> <h4>Retro</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column stone"> <div class="content"> <img src="images/cars2.jpg" alt="Car" style="width:100%"> <h4>Fast</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column stone"> <div class="content"> <img src="images/cars3.jpg" alt="Car" style="width:100%"> <h4>Classic</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column glass"> <div class="content"> <img src="images/people1.jpg" alt="People" style="width:100%"> <h4>Girl</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column glass"> <div class="content"> <img src="images/people2.jpg" alt="People" style="width:100%"> <h4>Man</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column glass"> <div class="content"> <img src="images/people3.jpg" alt="People" style="width:100%"> <h4>Woman</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column others"> <div class="content"> <img src="images/people1.jpg" alt="People" style="width:100%"> <h4>Girl</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column others"> <div class="content"> <img src="images/people2.jpg" alt="People" style="width:100%"> <h4>Man</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column others"> <div class="content"> <img src="images/people3.jpg" alt="People" style="width:100%"> <h4>Woman</h4> <p>Lorem ipsum dolor..</p> </div> </div> <!-- END GRID --> </div> </div> </section> </main> <!-- FOOTER --> <footer> <div class="container text-center"> <div class="row"> <div class="col-md-12"> <div class="social"> <ul> <li><a href="#"><i class="fab fa-facebook-square"></i></a></li> <li><a href="#"><i class="fab fa-linkedin"></i></a></li> <li><a href="#"><i class="fab fa-twitter-square"></i></a></li> </ul> </div> <p>&copy; example</p> </div> </div> </div> </footer> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>