I know how to select similarly named class name or ID if there are in the same direct parent, meaning if there are in the same box, proof https://codepen.io/akpobi/pen/poPddMr. But if there are more boxes and I'm trying to target all the buttons in their separate parents, it doesn't work. Help.
const btn = document.querySelector(".btn");
const box = document.querySelector(".box");
const boxInternal = document.querySelector(".box-internal").childNodes;
const popFunc = function(event) {
for (const boxInternals of boxInternal) {
if (event.target == boxInternals) {
box.classList.toggle("box-scale");
}
}
};
btn.addEventListener("click", popFunc, false)
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
You can use .closest(".box") to get the closest enclosing box to the event target, then toggle the desired class on it:
for (const btn of document.querySelectorAll(".btn")) {
btn.addEventListener("click", evt => {
evt.target.closest(".box").classList.toggle("box-scale");
});
}
body {
background-color: #0a0a16;
color: #ffffff;
margin: auto;
}
.box-wrapper {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
width: 200px;
height: 120px;
background-color: rgb(18, 18, 37);
margin: 5px;
transition: 0.6s;
}
.box-scale {
transform: scale(1.4);
}
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
Alternatively, you can use event delegation in the parent element:
document.querySelector(".box-wrapper")
.addEventListener("click", ({target: el}) => {
el.closest(".btn")
?.closest(".box")
?.classList
.toggle("box-scale")
;
})
;
body {
background-color: #0a0a16;
color: #ffffff;
margin: auto;
}
.box-wrapper {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
width: 200px;
height: 120px;
background-color: rgb(18, 18, 37);
margin: 5px;
transition: 0.6s;
}
.box-scale {
transform: scale(1.4);
}
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
If this is part of a form, you might want to disable submit with type="button" attributes on your buttons.
Related
I'm trying to switch a background image with a URL from a input field. With one block it works, for a second it only works if I use the first one first, or else it gets a undefined value. How do I grab the ImageUrl value for each block only?
jQuery($ => {
$(".Btn").click(function() {
jQuery(this).closest('.parent').find('.child')
.css("backgroundImage", "url('" + jQuery(".ImageUrl").val() + "')");
});
});
.child {
width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}
.wrapper {
width: 300px;
float: left;
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input class="ImageUrl"> <span class="Btn">Go</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input class="ImageUrl"> <span class="Btn">Go</span>
</div>
</div>
</div>
There are lots of ways to traverse the DOM to accomplish this. Here's one.
Note that I've made your button an actual button. This is important for accessibility (and good semantics in general). Style accordingly. You could also apply aria-role="button" to a span if you prefer.
jQuery($ => {
$(".switch button").click(function() {
const imgUrl = $(this).prev('input').val();
$(this).closest('.parent').find('.child')
.css("backgroundImage", "url('" + imgUrl + "')");
});
});
.child {
width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}
.wrapper {
width: 300px;
float: left;
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input value="https://via.placeholder.com/400"> <button>Go</button>
</div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input value="https://via.placeholder.com/400"> <button>Go</button>
</div>
</div>
</div>
$('.day-col-content').each(function() {
$(this).on('click', function() {
$('.day-col').removeClass('selected')
$(this).parent().addClass('selected');
$(this).clone().appendTo('.selected-day');
$('.selected-day .day-col-content').addClass('selected');
});
});
.actual-weather {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.selected-day .selected-day {
float: left;
width: 100%;
}
.selected-day .day-col-content {
display: none;
}
.selected-day .day-col-content.selected {
display: block
}
.days-box {
float: left;
width: 100%;
display: flex;
justify-content: center;
}
.day-col {
float: left;
width: 130px;
height: 130px;
position: relative;
margin: 0 10px 10px;
text-align: center;
cursor: pointer;
background:red;
}
.day-col.selected {
background:blue;
}
.day-col .day-col-content {
width: 100%;
position: absolute;
margin: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="actual-weather">
<span class="selected-day"></span>
</div>
<div class="days-box">
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div>
I have scenario where I want to click on specific div and then this div append to another div ( selected day)
and then I want to switch between appended divs for showing selected div (day) (for functionality like tabs).
Problem is that all div are showing and I don't know how to manage thoose selected divs
Does somebody know how to achieve this?
You need to empty the div first then append the DATA or use .html() directly and it will overrite the data:
$('.selected-day').html('').append( $(this).clone() );
//OR
$('.selected-day').html( $(this).clone() );
NOTE: You don't have to loop using .each() to attach the click event to all the divs just use the selector directly like :
$('.day-col-content').on('click', function() {
...
});
SAMPLE
$('.day-col-content').on('click', function() {
$('.day-col').removeClass('selected');
$(this).parent().addClass('selected');
$('.selected-day').html($(this).clone());
});
.selected-day {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 3
</p>
</div>
<hr>
<div class="selected-day"></div>
Hi I'm not sure about your styling but this would work as a custom tab version
$(document).on('click','.day-col-content',function(){
$('.day-col').removeClass('selected')
$(this).parent('.day-col').addClass('selected');
$('.selected-day').html($(this).clone());
$('.selected-day .day-col-content').addClass('selected');
});
.day-col.selected {
color:green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div class="selected-day"></div>
I have a card which has onclick change functionality.
If I include two of these cards on my page, the classes will duplicate. But it's also changing the class in the second card when a change occurs in the first and vice versa.
Here is a demo:
$('div[data-item="item--1"]').addClass('active');
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader').removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']').addClass('active');
});
.card{
display: flex;
flex-direction: column;
padding: 30px;
background: lightblue;
}
.headers{
padding: 20px;
margin-bottom: 40px;
}
.header{
cursor: pointer;
opacity: 0.4;
}
.header.active{
opacity: 1;
}
.subheader{
display: none;
padding: 0px 20px;
}
.header.active,
.subheader.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Test</div>
<div class="header" data-item="item--2">Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Test</div>
<div class="subheader" data-item="item--2">Subheader for Test 2</div>
</div>
</div>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Another Test</div>
<div class="header" data-item="item--2">Another Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Another Test</div>
<div class="subheader" data-item="item--2">Subheader for Another Test 2</div>
</div>
</div>
How can I prevent this?
You can pass the closest .card ancestor as the context of the selectors.
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader', $(this).closest('.card')).removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']',
$(this).closest('.card')).addClass('active');
});
Live Example:
$('div[data-item="item--1"]').addClass('active');
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader', $(this).closest('.card')).removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']', $(this).closest('.card')).addClass('active');
});
.card{
display: flex;
flex-direction: column;
padding: 30px;
background: lightblue;
}
.headers{
padding: 20px;
margin-bottom: 40px;
}
.header{
cursor: pointer;
opacity: 0.4;
}
.header.active{
opacity: 1;
}
.subheader{
display: none;
padding: 0px 20px;
}
.header.active,
.subheader.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Test</div>
<div class="header" data-item="item--2">Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Test</div>
<div class="subheader" data-item="item--2">Subheader for Test 2</div>
</div>
</div>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Another Test</div>
<div class="header" data-item="item--2">Another Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Another Test</div>
<div class="subheader" data-item="item--2">Subheader for Another Test 2</div>
</div>
</div>
As you can see I have a number of dots lined vertically! On scrolling down it works, as one scrolls the next dot gets a class thats chnages the style of the ball, I want the exact same to happen when i scroll up but it is not working! Please any input is appreciated!
Here is a code pen for your reference!
below the html, css and javascript:
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls[0].classList.add("active");
window.onscroll = function() {
milestoneBalls.each(function(i, v) {
var thisBall = $(this);
var nextBall = milestoneBalls[i + 1];
var prevBall = milestoneBalls[i - 1];
var thisPositionTop = thisBall.offset().top + ($(this).parent().height() / 3);
var winScroll = window.scrollY;
if (thisPositionTop <= winScroll) {
nextBall.classList.add("active");
thisBall.addClass("inactive");
}
if (thisPositionTop >= winScroll) {
//this.classList.add("inactive_ball");
}
});
}
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>
So this logic performs the same that you were doing already. With the added logic of, if the element should not advance, and we are not the first element, we check to see if the previous ball should be active. And if so, we make it active.
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls.eq(0).addClass('active');
window.addEventListener('scroll', function() {
var activeBall = milestoneBalls.filter('.active');
var activeBallIndex = milestoneBalls.index( activeBall );
var activeBallPositionTop = activeBall.offset().top + (activeBall.parent().height() / 3);
if (activeBallPositionTop <= window.scrollY) {
activeBall.removeClass('active');
milestoneBalls.eq( activeBallIndex + 1).addClass('active');
} else if ( activeBallIndex ) {
var previousBall = milestoneBalls.eq( activeBallIndex - 1 );
var previousBallPositionTop = previousBall.offset().top + (previousBall.parent().height() / 3);
if (previousBallPositionTop > window.scrollY) {
activeBall.removeClass('active');
previousBall.addClass('active');
}
}
});
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>
You can use on wheel from jQuery.
$(window).on('wheel',function(e) {
var mov = e.originalEvent.deltaY;
if(mov > 0) {
alert("up");
}else {
alert("down");
}
});
This will sort out your problem regarding detection of scrolling direction.
I have a list of 4 divs and i use 2 checkboxes to filter the list by the existence of specific divs. The filtering works perfect until i check both 2 checkboxes.
As you can see in my code below if you try to check both "Card" & "Paypal" checkboxes the list is disappeared. Instead i need to display all of 4 divs. How can i make it work this way?
Here's the code:
$("#by-card").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.card-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
$("#by-paypal").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.paypal-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
.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;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes-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>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">★ 4.5</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="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="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</div>
<div class="rating">★ 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>
To get that behaviour you need to change the code which you have:
You need to have a single change function for the checkboxes of paypal and card
Then whenever any of the checkbox is checked/unchecked, you can loop both the checkboxes to know if any of them is checked. If you get the checkbox checked then show the elements with class store-block where I have also added one more class same as the id value of the checkbox that is clicked.
Using this class value it will be easy to determine the set of divs that belong to the particular checkbox.
You also need to manage the scenario when all the checkbox are unchecked after they were checked so, for that I have used a variable oneChecked.
$(".inputRadioGroup input[type='checkbox']").change(function() {
var oneChecked = false;
$(".inputRadioGroup input[type='checkbox']").each(function(){
var checked = this.checked;
var checkedId = $(this).attr('id');
if(checked){
oneChecked = true;
$('.'+checkedId).show();
} else {
$('.'+checkedId).hide();
}
});
if(!oneChecked){
$('.store-block').show();
}
});
.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;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-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>
<div class="storesList">
<div class="store-block by-card">
<div class="store-name">Apple Store</div>
<div class="rating">★ 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Nokia Store</div>
<div class="rating">★ 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block by-card">
<div class="store-name">Samsung Store</div>
<div class="rating">★ 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Linux</div>
<div class="rating">★ 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>
I'm not good at jQuery, but here's how I'd solve that using good old plain vanilla Javascript. The key change to your approach is to listen for the change event on a parent element of both checkboxes (instead of on each checkbox with a seperate handler), then check if either, or both, or no checkboxes are checked, and create the appropriate DOM state accordingly:
var checkboxArea = document.querySelector('.checkboxes-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var cardBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.card-available')
})
var payPalBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.paypal-available')
})
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
default:
payPalBlocks.concat(cardBlocks).forEach(function(block) { block.classList.remove('hide-me') })
}
})
.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;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<div class="checkboxes-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>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">★ 4.5</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="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="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</div>
<div class="rating">★ 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>