I only found examples using jQuery, but I would like to know how to add and remove classes in sequence, according to the button click, using Vanilla JS. I tried using forEach but I was only able to add all the classes at once.
document.querySelector('#addBtn').addEventListener('click', () => {
document.querySelectorAll('.dot').forEach(e => {
e.classList.add('active')
})
})
document.querySelector('#removeBtn').addEventListener('click', () => {
document.querySelectorAll('.dot').forEach(e => {
e.classList.remove('active')
})
})
.dots{
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot{
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active{
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
You can check the below logic with querySelectorAll for finding the last active elements and using nextElementSibling to apply the change
document.querySelector('#addBtn').addEventListener('click', () => {
const activeElements = document.querySelectorAll('.dot.active')
//no active elments
if (!activeElements || !activeElements.length) {
//set active class for the first found element
const firstElement = document.querySelector('.dot')
if (firstElement) {
firstElement.classList.add('active')
return
}
}
//finding the last active element
const lastElement = activeElements[activeElements.length - 1];
//apply the class the next element of the current active element
const nextElement = lastElement.nextElementSibling
if (nextElement) {
nextElement.classList.add('active')
}
})
document.querySelector('#removeBtn').addEventListener('click', () => {
const activeElements = document.querySelectorAll('.dot.active')
//finding the last active element
const lastElement = activeElements[activeElements.length - 1];
if (lastElement) {
//remove the active class from the last active element
lastElement.classList.remove('active')
}
})
.dots {
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot {
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active {
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
You can break out of the loop once a dot has had active added/removed.
document.querySelector('#addBtn').addEventListener('click', () => {
const dots = document.querySelectorAll('.dot');
for (let dot of dots) {
if (![...dot.classList].includes('active')) {
dot.classList.add('active');
break;
}
}
});
document.querySelector('#removeBtn').addEventListener('click', () => {
const dots = document.querySelectorAll('.dot');
for (let dot of [...dots].reverse()) {
if ([...dot.classList].includes('active')) {
dot.classList.remove('active');
break;
}
}
});
.dots{
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot{
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active{
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
Please check answer below. Explanation is in comments.
document.querySelector('#addBtn').addEventListener('click', () => {
// Get active elements
let activeEl = document.querySelectorAll('.dot.active');
let nextActiveEl;
// If we found active element then find the next sibling else select the first element
if (activeEl.length > 0) {
nextActiveEl = activeEl[activeEl.length - 1].nextElementSibling
} else {
nextActiveEl = document.querySelectorAll('.dot')[0];
}
// If selected element is not null then add class active
if (nextActiveEl)
nextActiveEl.classList.add('active');
})
document.querySelector('#removeBtn').addEventListener('click', () => {
// Get active elements
let activeEl = document.querySelectorAll('.dot.active');
// If we found active element then remove active class of last active element
if (activeEl.length > 0) {
activeEl[activeEl.length - 1].classList.remove('active');
}
})
.dots {
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
height: 10px;
margin-bottom: 40px;
}
.dot {
position: relative;
height: 10px;
width: 100%;
background-color: grey;
margin: 5px;
}
.dot.active {
background-color: red;
}
<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>
<div class="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
Related
I'm a bit of a beginner and trying to create a modal that is triggered by mouseenter/mouseleave event handlers tied to a single class that is attached to multiple div blocks, but uses javascript to grab unique title and paragraph info from attributes on each div when the mouse is over it. Is this possible or do I have to create individual modals for each div to achieve this?
(I tentatively set it up to display the info from the first box on all of them to show generally what i'm going for)
https://codepen.io/admaloch/pen/yLKWWew
boxes.forEach((box) => {
box.addEventListener("mouseenter", function (e) {
modalContainer.classList.remove("display-none");
modalTitle.innerText = titleInfo[0].title;
modalParagraph.innerText = dataContent[0].dataset.content;
});
box.addEventListener("mouseleave", function (e) {
modalContainer.classList.add("display-none");
});
});
I'm not sure if I understood correctly, but you can just access these attributes through box
const boxes = document.querySelectorAll(".block");
const modalContainer = document.querySelector(".modal");
const modalTitle = document.querySelector(".modal-title");
const modalParagraph = document.querySelector(".modal-paragraph");
boxes.forEach((box) => {
box.addEventListener("mouseenter", function (e) {
modalContainer.classList.remove("display-none");
modalTitle.innerText = box.title;
modalParagraph.innerText = box.dataset.content;
});
box.addEventListener("mouseleave", function (e) {
modalContainer.classList.add("display-none");
});
});
.block-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.block {
background-color: blue;
height: 50px;
width: 50px;
margin-top: 50px;
}
.display-none {
display: none;
}
.modal {
position: fixed;
background-color: lightblue;
width: 30%;
height: 100px;
left: 35%;
top: 10vh;
border-radius: 14px;
}
.modal-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.modal-title,
.modal-paragraph {
margin: 0;
padding: 0;
}
<div class="container">
<div class="block-container">
<div class="block" title="1" data-content="Info for the 1st box"></div>
<div class="block" title="2" data-content="Info for the 2nd box"></div>
<div class="block" title="3" data-content="Info for the 3rd box"></div>
<div class="block" title="4" data-content="Info for the 4th box"></div>
<div class="block" title="5" data-content="Info for the 5th box"></div>
<div class="block" title="6" data-content="Info for the 6th box"></div>
</div>
<div class="modal display-none">
<div class="modal-info">
<h3 class="modal-title"></h3>
<p class="modal-paragraph"></p>
</div>
</div>
</div>
You can pass an index in forEach and use that index instead of titleInfo[0]
boxes.forEach((box, index) => {
box.addEventListener("mouseenter", function (e) {
modalContainer.classList.remove("display-none");
modalTitle.innerText = titleInfo[index].title;
modalParagraph.innerText = dataContent[index].dataset.content;
});
box.addEventListener("mouseleave", function (e) {
modalContainer.classList.add("display-none");
});
});
I created six div elements, each with an id. Inside these six div elements, I created six img elements, each with an id.
Now I want to drag any image and drop it over any of the six div elements.
When I drag image 1 and drop it over div 5, then the div 5 image should move to div 1. How can I achieve this? Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<interface id="interface">
<div id="div1"><img src="images/images/Number1.png" alt="one" id="drag1" draggable="true"></div>
<div id="div2"><img src="images/images/Number2.png" alt="two" id="drag2" draggable="true"></div>
<div id="div3"><img src="images/images/Number3.png" alt="three" id="drag3" draggable="true"></div>
<div id="div4"><img src="images/images/Number4.png" alt="four" id="drag4" draggable="true"></div>
<div id="div5"><img src="images/images/Number5.png" alt="five" id="drag5" draggable="true"></div>
<div id="div6"><img src="images/images/Number6.png" alt="six" id="drag6" draggable="true"></div>
</interface>
<script src="app.js"></script>
</body>
</html>
Javascript code starts here:
console.log("Get Started");
const imgboxes = document.querySelectorAll("img");
console.log(imgboxes);
const divBoxes = document.querySelectorAll("div");
console.log(divBoxes);
for (imgbox of imgboxes) {
imgbox.addEventListener('dragstart', (e) => {
console.log("dragStart triggred");
setTimeout(() => {
e.target.className = "hide";
}, 0);
})
}
for (imgbox of imgboxes) {
imgbox.addEventListener('dragend', (e) => {
console.log("dragEnd triggred");
e.target.className = "imgbox"
})
}
for (divbox of divBoxes) {
divbox.addEventListener('dragover', (e) => {
console.log("dragOver triggred");
e.preventDefault();
})
divbox.addEventListener('dragenter', () => {
console.log("dragEnter triggred");
})
divbox.addEventListener('dragleave', () => {
console.log("dragLeave triggred");
})
divbox.addEventListener('drop', (e) => {
console.log("dragDrop triggred");
e.target.appendChild(imgbox);
})
}
CSS code is here:
body{
padding: 0;
margin: 0 auto;
}
#div1, #div2, #div3, #div4, #div5, #div6{
float: left;
width:85px;
height:85px;
margin: 20px;
padding: 0px;
border: 1px solid black;
align-items: center;
justify-content: center;
text-align: center;
}
#drag1, #drag2, #drag3, #drag4, #drag5, #drag6{
height: 80px;
width: 80px;
margin-top: 2px;
}
#interface{
display: flex;
flex-direction: row;
margin: 100px auto;
align-items: center;
justify-content: center;
}
.hide{
display: none;
}
.imgbox{
height: 80px;
width: 80px;
margin-top: 2px;
}
Based on swapping child elements of div using JavaScript by drag and drop, here is a demo.
The event.target.id is stored within the dragStart() function.
This dragged image id can then be retrieved in the drop() function.
Then that id can be used to retrieve the draggedImage.
Within drop(), we can test to make sure that the image is not being dropped back into the same container.
appendChild() removes the child element being appended from its previous parent.
const images = document.querySelectorAll("img");
const containers = document.querySelectorAll(".container");
images.forEach((image) => {
image.addEventListener("dragstart", dragStart);
image.addEventListener("dragend", dragEnd);
});
containers.forEach((container) => {
container.addEventListener("dragover", dragOver);
container.addEventListener("drop", drop);
});
function dragStart(event) {
event.dataTransfer.setData("draggedImageId", event.target.id);
setTimeout(() => event.target.classList.toggle("hidden"));
}
function dragEnd(event) {
event.target.classList.toggle("hidden");
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
const draggedImageId = event.dataTransfer.getData("draggedImageId");
const draggedImage = document.getElementById(draggedImageId);
const fromContainer = draggedImage.parentNode;
const toContainer = event.currentTarget;
if (toContainer !== fromContainer) {
fromContainer.appendChild(toContainer.firstElementChild);
toContainer.appendChild(draggedImage);
}
}
.row {
display: flex;
column-gap: 1rem;
padding: 1rem;
border: solid 2px black;
background: pink;
}
.container {
width: 100px;
height: 200px;
padding: 1rem;
border: solid 2px black;
background: white;
}
.hidden {
display: none;
}
<div class="row">
<div class="container">
<img id="drag1" src="https://source.unsplash.com/random/80x80/?cat" draggable="true" />
</div>
<div class="container">
<img id="drag2" src="https://source.unsplash.com/random/80x80/?fruit" draggable="true" />
</div>
<div class="container">
<img id="drag3" src="https://source.unsplash.com/random/80x80/?car" draggable="true" />
</div>
<div class="container">
<img id="drag4" src="https://source.unsplash.com/random/80x80/?dog" draggable="true" />
</div>
</div>
I want to use scroll to add and remove a class of Tabs
When I scroll down the page, then all tab switch to active. Then, when I scroll up the page, the all tab switched to inactive.
In the current condition, when I scroll down the page, it removes the current tab class, and when I scroll up the page, it adds the active class to the first tab. But, it's not what I want. I want it when I scroll down it moves to the next tab, when I scroll up it moves to the previous tab. I think I should use the if else tab.
//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
let firstTab = function(tabs) {tabs.classList.add('tab-active')};
let firstContent = function(content) {content.classList.add('content-active')};
firstTab(tabs[0]); //Already remove the ready and callback
firstContent(content[0]);
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
for (let i = 0; i < tabs.length; i++) {
window.addEventListener('scroll', () => tabScroll(i)); //Already remove the multiple scroll listeners in a loop. But, idk whether it's right or not
}
function tabClick(currentTab) {
//Remove Active Class
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function tabScroll(currentTab) {
if(document.documentElement.scrollTop > 0) {
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
}
})
.container {
width: 100vw;
height: 400px;
}
.tabs {
display: flex;
height: 65px;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 10px;
cursor: pointer;
}
.tab-active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100%;
margin-top: 5px;
height: calc(100% - 65px);
}
.content-item {
width: 100%;
height: 100%;
display: none;
padding: 0px;
border: none;
position: absolute;
}
.content-wrapper1 {
width: 100%;
height: 100%;
}
.content-wrapper2 {
width: 100%;
height: 100%;
}
.content-wrapper3 {
width: 100%;
height: 100%;
}
.content-iframe {
height: 100%;
width: 100%;
}
.content-show {
display: flex;
animation-name: fade-out;
animation-duration: 2.5s;
}
#keyframes fade-out {
0% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
.content-active {
display: flex;
border: none;
justify-content: center;
height: 100%;
animation-name: fade-in;
animation-duration: 2.5s;
}
#keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0.01;
}
100%{
display: block;
opacity: 1;
}
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this guys. Thank you so much..
I've got some section with infinite carousel using vanilla js.
My logic is based on using justify-content:flex-end for previous slide and justify-content:flex-start for next one.
My carousel has default justify-content:flex-start and it works fine when slides to next, but there is some render delay if I'm using slide to prev.
It's because of using justify-content:flex-end for prev, but how to get rid of delay?
This is my code
const slider = document.querySelector('.slider')
const carousel = document.querySelector('.carousel')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
let direction
prev.addEventListener('click', () => {
if (direction === -1) {
slider.appendChild(slider.lastElementChild)
direction = 1
}
direction = 1
carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(20%)'
})
next.addEventListener('click', () => {
direction = -1
carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-20%)'
})
slider.addEventListener('transitionend', () => {
if (direction === -1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === 1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {
slider.style.transition = 'transform 0.5s'
})
})
.section {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 0;
background-color: green;
position: relative;
}
.carousel {
display: flex;
width: 70%;
height: 100%;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
.slider {
display: flex;
width: 100%;
height: 100%;
transition: all 0.5s;
}
.item {
display: flex;
width: 20%;
flex: 1;
flex-shrink: 0;
flex-basis: 20%;
height: 70px;
}
.prev,
.next {
position: absolute;
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid green;
cursor: pointer;
z-index: 3;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
<section class="section">
<div class="prev">Prev</div>
<div class="next">Next</div>
<div class="carousel">
<div class="slider">
<div class="item"> Item 1</div>
<div class="item"> Item 2</div>
<div class="item"> Item 3</div>
<div class="item"> Item 4</div>
<div class="item"> Item 5</div>
<div class="item"> Item 1</div>
<div class="item"> Item 2</div>
<div class="item"> Item 3</div>
<div class="item"> Item 4</div>
<div class="item"> Item 5</div>
</div>
</div>
</section>
Not sure if this is the best approach. Your code is appending (and prepending) elements after the slider has transitioned. Because of the overflow:hidden you don't notice it happen when it appends to the end of the slider but you notice when it prepends to the start which is why you see it render after the translation.
So you could move the slider 20% to the left so you don't see when the element is prepended and not change most of your code.
const slider = document.querySelector('.slider')
const carousel = document.querySelector('.carousel')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
let direction
prev.addEventListener('click', () => {
if (direction === -1) {
slider.appendChild(slider.lastElementChild)
direction = 1
}
direction = 1
// removed - carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(20%)'
})
next.addEventListener('click', () => {
direction = -1
// removed - carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-20%)'
})
slider.addEventListener('transitionend', () => {
if (direction === -1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === 1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {
slider.style.transition = 'transform 0.5s'
})
})
.section {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 0;
background-color: green;
position: relative;
}
.carousel {
display: flex;
width: 70%;
height: 100%;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
.slider {
display: flex;
width: 100%;
height: 100%;
transition: all 0.5s;
/* Only change */ margin-left: -20%;
}
.item {
display: flex;
width: 20%;
flex: 1;
flex-shrink: 0;
flex-basis: 20%;
height: 70px;
}
.prev,
.next {
position: absolute;
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid green;
cursor: pointer;
z-index: 3;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
<section class="section">
<div class="prev">Prev</div>
<div class="next">Next</div>
<div class="carousel">
<div class="slider">
<div class="item"> Item 1</div>
<div class="item"> Item 2</div>
<div class="item"> Item 3</div>
<div class="item"> Item 4</div>
<div class="item"> Item 5</div>
<div class="item"> Item 6</div>
<div class="item"> Item 7</div>
<div class="item"> Item 9</div>
<div class="item"> Item 0</div>
</div>
</div>
</section>
Based on a previous question of mine i want to filter a list of divs by different combinations based on the existence of specific div elements.
In the below example i use 3 checkboxes "Card", "Paypal", "Show only open stores" to filter the list. As it is now it works for the "Card" & "Paypal" checkboxes but if you try to check also the "Show only open stores" checkbox it messing it up. How can i fix that?
Here's the code:
var checkboxArea = document.querySelector('.filter-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var byOpen = document.getElementById('by-open')
var cardBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.card-available')
})
var payPalBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.paypal-available')
})
var openStoreBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.close-small-tag')
})
checkboxArea.addEventListener('change', function(e) {
switch (true) {
case byCard.checked && byPaypal.checked:
storeBlocks.forEach(function(block) {
block.classList.remove('hide-me')
})
break
case byCard.checked:
cardBlocks.forEach(function(block) {
block.classList.remove('hide-me')
})
payPalBlocks.forEach(function(block) {
block.classList.add('hide-me')
})
break
case byPaypal.checked:
cardBlocks.forEach(function(block) {
block.classList.add('hide-me')
})
payPalBlocks.forEach(function(block) {
block.classList.remove('hide-me')
})
break
case byOpen.checked:
openStoreBlocks.forEach(function(block) {
block.classList.toggle('hide-me')
})
break
default:
payPalBlocks.concat(cardBlocks).forEach(function(block) {
block.classList.remove('hide-me')
})
}
})
.close-small-tag,
.open-small-tag {
position: absolute;
left: 130px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: brown;
}
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.filter-area {
margin-bottom: 20px;
overflow: hidden;
}
.inputRadioGroup {
float: left;
margin-right: 20px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}
<div class="filter-area">
<div class=" inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-open">
<label for="by-open">SHOW ONLY OPEN STORES</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">★ 4.5</div>
<div class="open-small-tag">OPEN</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">★ 3.8</div>
<div class="open-small-tag">OPEN</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">★ 4.0</div>
<div class="close-small-tag">CLOSE</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux Store</div>
<div class="rating">★ 4.9</div>
<div class="close-small-tag">CLOSE</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>