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 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.
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
Then in the hr element we set the original left property to that variable
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 thedata.activeattribute, 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-aroundto 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.