html css responsive-design w3.css data-filtering

How to remove background color when clicked on active class

    filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("filterDiv");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }
    
    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];}
      }
    }
    
    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.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }

        .filterDiv {
          float: left;
          margin: 2px;
          display: none;
        }
        .btn
        {
            list-style: none;
            display: inline-block;
        }
        .show {
          display: block;
        }
        
        .container {
          margin-top: 20px;
          overflow: hidden;
        }
        
        /* Style the buttons */
        .btn {
          border: none;
          outline: none;
          padding: 12px 16px;
          cursor: pointer;
        }

        /* animation duration */
        #para
        {
            animation-duration: 2s;
        }

        #myBtnContainer
        {
          display: flex;
          overflow-x: auto;
        }

<!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="https://www.w3schools.com/w3css/4/w3.css">
    <title>Document</title>
</head>
    
        <body>
        
        <h2>Sample</h2>
        
        <div id="myBtnContainer">
          <li class="btn active" onclick="filterSelection('all')"> Show&nbsp;all</li>
          <li class="btn" onclick="filterSelection('sam')"> sam</li>
          <li class="btn" onclick="filterSelection('jhon')"> jhon</li>
          <li class="btn" onclick="filterSelection('rog')"> rog</li>
          <li class="btn" onclick="filterSelection('stv')"> stv</li>
          <li class="btn" onclick="filterSelection('scott')"> scott</li>
        </div>
        
        <div class="container">
          <div class="filterDiv all w3-container w3-animate-bottom" id="para">
              <h4>what is food</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>

                <h4>lorem ipsum</h4>
                            <p> lorem ipsum
                  </p>
                            <h4>lorem ipsum</h4>
                            <p class="text">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
          <div class="filterDiv sam  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</h4>
                            <p>   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
                            <h4 >What is the Cricket Live Scores API?</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
                             </p>
          </div>
          
          <div class="filterDiv jhon  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</h4>
            <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
                <h4>lorem ipsum</h4>
                <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
          <div class="filterDiv rog  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</h4>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
          <div class="filterDiv stv  w3-container w3-animate-bottom" id="para">
            <h4>lorem ipsum</a></h4>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
          </div>
        </div>
</body>
 

</html>

The above screenshot is from my phone.

The question is how do I remove the blue colour appearing on background on click of all list tags? I did not add it in my css.
I tried using focus, active in my css, that did not work.
I want to implement this as showed in the following image.

I came across data filtering while I was going through w3schools. I saw some really nice examples online, and I wanted to try one, but I'm stuck at this example because I cannot understand where the blue colour in the image is coming from.

Solution

Here is an example of how to use dataset attributes along with JS to change a percentage of movement in the ROOT element to move your HR below the list-item buttons.

You set the HR below the LI elements in your HTML so you can use CSS to target the HR with the unique selector for each button by targeting the HR along with the general sibling selector ~. Set the HR element to absolute and style the width and background color, then you can position it using the left property on hover of each button element .show-all:hover ~ hr.

Now we set the hr's original to a CSS variable

:root {
  --active: 24px;
}

Then in the hr element we set the original left property to that variable

  left: var(--active);

Then in the JS function that sets your active class you can add the following line: document.documentElement.style.setProperty('--active, this.dataset.active), since we have the percentage of offset set in the data.active attribute, it will now set the clicked buttons percentage of offset to the HR's active variable in the pages style for the HTML element.

I also added a justify-content: space-around to space the buttons out equally, otherwise youb would have to use more code to shorten/enlarge the HR element on hover...

NOTE: there is some kind of padding or margin glich going on with the clicking of your last buttons, I do apologize, but I did not have time to work that part out, but this gives you a good idea of how to achieve the method of active you are looking for.

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

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];
    }
  }
}

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.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    console.log(this.dataset.active)
    document.documentElement.style.setProperty('--active', this.dataset.active )
  });
}

:root {
  --active: 24px;
}

.filterDiv {
  float: left;
  margin: 2px;
  display: none;
}

.btn {
  list-style: none;
  display: inline-block;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

hr {
  width: 0.25em;
  left: var(--active);
  width: 12%;
  background-color: purple;
  position: absolute;
  top: .8rem;
  transition: left .3s ease-in-out;
}

.show-all:hover ~ hr {
  left: 24px;
}

.sam:hover ~ hr {
  left: 24%;
}

.jhon:hover ~ hr {
  left: 40%;
}

.rog:hover ~ hr {
  left: 56%;
}

.stv:hover ~ hr {
  left: 70%;
}

.scott:hover ~ hr {
  left: 85%;
}

/* animation duration */

#para {
  animation-duration: 2s;
}

#myBtnContainer {
  display: flex;
  justify-content: space-around;
  overflow-x: none;
  position: relative;
}

<!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="https://www.w3schools.com/w3css/4/w3.css">
  <title>Document</title>
</head>

<body>

  <h2>Sample</h2>

  <div id="myBtnContainer">
    <li class="btn show-all active" data-active="24px" onclick="filterSelection('all')"> Show&nbsp;all</li>
    <li class="btn sam" data-active="24%" onclick="filterSelection('sam')"> sam</li>
    <li class="btn jhon" data-active="40%" onclick="filterSelection('jhon')"> jhon</li>
    <li class="btn rog" data-active="56%" onclick="filterSelection('rog')"> rog</li>
    <li class="btn stv" data-active="70%" onclick="filterSelection('stv')"> stv</li>
    <li class="btn scott" data-active="85%" onclick="filterSelection('scott')"> scott</li>
    <hr />
  </div>

  <div class="container">
    <div class="filterDiv all w3-container w3-animate-bottom" id="para">
      <h4>what is food</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>

      <h4>lorem ipsum</h4>
      <p> lorem ipsum
      </p>
      <h4>lorem ipsum</h4>
      <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
    <div class="filterDiv sam  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
      <h4>What is the Cricket Live Scores API?</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
      </p>
    </div>

    <div class="filterDiv jhon  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
    <div class="filterDiv rog  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum</h4>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
    <div class="filterDiv stv  w3-container w3-animate-bottom" id="para">
      <h4>lorem ipsum
      </h4>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
    </div>
  </div>
</body>


</html>