Develop Reference

<template> clone but with texts from user input

I am trying to create a comment section for my page, I used the template element to create the box and format for my user's pic and name but i'm having difficulties adding the text received from the user to get into the box. right now it creates the box and just puts the text outside/under it. How can I create a element to store inside the template?
function postComment() {
//Clone new box for comment
var temp = document.getElementsByTagName("template")[0];
var clone = temp.content.cloneNode(true);
var newComment = document.getElementById("new-comment");
newComment.appendChild(clone)
//Get comment
var userComment = document.getElementById("comment-box").value;
var text = document.createElement('p');
text.innerHTML = userComment;
newComment.appendChild(text)
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
.post-comment .list .day {
font-size: 12px;
}
.post-comment {
padding: 0 0 15px 58px
}
#comment-box {
border: none;
border-radius: 5px;
}
.comment-box .user {
display: flex;
width: min-content;
}
.comment-box .image img {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 50%;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template>
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>
<div class="user-name">
<div class="name">Tom Nook</div>
<div class="day">1 second ago</div>
</div>
</div>
</div>
</template>
<div id="new-comment"></div>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Try this and see if this suits your requirements:
function postComment() {
//Get comment
var userComment = document.getElementById("comment-box").value;
var html = '<div class="list">' +
'<div class="user">' +
'<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>' +
'<div class="user-name">' +
'<div class="name">Tom Nook</div>' +
'<div class="day">1 second ago</div>' +
'</div>' +
'</div>' +
'<div id="new-comment">' + userComment + '</div>' +
'</div>';
var template = document.getElementsByTagName("template")[0];
template.insertAdjacentHTML("afterend", html);
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template></template>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Stepper with pure javascript - previous function not working

How to make it return to false once exceeded max step (which is the last step), previous function not working once exceeded max step, I tried to set current step as -1 but still doesn't work.
I get this error msg (TypeError: bullets[current] is undefined) on my console when it exceeded max step.
Can somebody help me with this? Thanks in advance.
const bullets=[...document.querySelectorAll('.bullet')];
const max=4;
let current=-1;
function next(){
current+=1;
if(!bullets[current]){
return false;
}
bullets[current].classList.add('hovered');
}
function previous(){
bullets[current].classList.remove('hovered');
current-=1;
if(!bullets[current]){
return false;
}
bullets[current].classList.add('hovered');
}
.progressbar{
display:flex;
justify-content:space-between;
align-items:flex-end;
width:90%;
margin:0 auto;
margin-bottom:40px;
}
.item{
text-align:center;
width:20%;
position:relative;
}
.text{
height:50px;
margin:10px 0px;
color:#3CB371;
}
.bullet{
border:1px solid #3CB371;
height:20px;
width:20px;
color:#3CB371;
display:inline-block;
transition:background-color 500ms;
line-height:20px;
}
.bullet.hovered{
color:#fff;
background-color:#3CB371;
bottom:10px;
}
.bullet.completed:after{
content:'';
position:absolute;
bottom:80px;
height:1px;
width:calc(133% - 21px);
background-color:#3CB371;
margin-left:7px;
}
<div class="progressbar">
<div class="item">
<div class="bullet completed">1</div>
<div class="text">Hello Hello Hello</div>
</div>
<div class="item">
<div class="bullet completed">2</div>
<div class="text">Hello</div>
</div>
<div class="item">
<div class="bullet completed">3</div>
<div class="text">Hello</div>
</div>
<div class="item completed">
<div class="bullet">4</div>
<div class="text">Hello</div>
</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>

You're unconditionally incrementing/decrementing current at the moment. Even if you don't try changing the classList on this call of next or previous, the next time either button is clicked, the current index may not exist. So, in previous, when you do bullets[current].classList.remove('hovered'); at the beginning of the function, that will throw if the last current went beyond the possible indicies for the bullets collection.
Consider using Math.max / Math.min to ensure that current is constrained to the possible indicies (or -1, in the case that nothing should be highlighted):
const bullets = [...document.querySelectorAll('.bullet')];
let current = -1;
function next() {
current = Math.min(current + 1, bullets.length - 1);
bullets[current].classList.add('hovered');
}
function previous() {
if (bullets[current]) {
bullets[current].classList.remove('hovered');
}
current = Math.max(current - 1, -1);
}
.progressbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.item {
text-align: center;
width: 20%;
position: relative;
}
.text {
height: 50px;
margin: 10px 0px;
color: #3CB371;
}
.bullet {
border: 1px solid #3CB371;
height: 20px;
width: 20px;
color: #3CB371;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.hovered {
color: #fff;
background-color: #3CB371;
bottom: 10px;
}
.bullet.completed:after {
content: '';
position: absolute;
bottom: 80px;
height: 1px;
width: calc(133% - 21px);
background-color: #3CB371;
margin-left: 7px;
}
<div class="progressbar">
<div class="item">
<div class="bullet completed">1</div>
<div class="text">Hello Hello Hello</div>
</div>
<div class="item">
<div class="bullet completed">2</div>
<div class="text">Hello</div>
</div>
<div class="item">
<div class="bullet completed">3</div>
<div class="text">Hello</div>
</div>
<div class="item completed">
<div class="bullet">4</div>
<div class="text">Hello</div>
</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>

Add class to div on scroll up and down

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.

jquery filter search needs to search within categories

I'm creating a jquery filter search.
I want to be able to search within a filtered category. I can filter out categories, but if I search within the selected category the search searches through the whole bunch but not only the selected category.
The search is almost working as it should, but I'm not sure how I can implement the search within categories criteria.
Here is a link to a fiddle
Any help or advise would be very much appreciated
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
if($('#searchFilterDiv div.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
});
});
$(".filter-button").on("click", function(){
var selectItem = $(this).data('category');
filter(selectItem);
});
function filter(e) {
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').hide().filter(function () {
return regex.test($(this).data('name'))
}).show();
if($('.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
}
$('.box-item').on('click', function(){
$('.box-item').removeClass('selected');
$(this).addClass('selected');
});
.search-form-item{
margin-top: 30px;
background-color: #f9f9f9;
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: .9em;
text-align: left;
}
/* Thjonusta AO */
.boxes-centered{
text-align:center;
}
.box-item{
color: #333;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px 10px;
margin: 1.7em .8em 1.7em .8em;
max-width: 10vw;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
display:inline-block;
float:none;
text-align:center;
}
.box-item:hover{
border-color: blue;
}
.box-item.selected{
border-color:red;
color:red;
}
.search-form-service {
border: 1px solid lightgray;
margin-left: 8.333%;
margin-right: 8.333%;
background: #fff;}
.search-form-service .form-control {
border-radius: 0 !important;
box-shadow: none;
-webkit-appearance: none;
border: 0;
height: 50px;
font: 18px "DINPro", Arial, sans-serif;
padding: 15px;
color: #4b4b4b; }
.search-form-service .form-control::-moz-placeholder {
color: #4b4b4b;
opacity: 1; }
.search-form-service .form-control:-ms-input-placeholder {
color: #4b4b4b; }
.search-form-service .form-control::-webkit-input-placeholder {
color: #4b4b4b; }
#media (max-width: 767px) {
.search-form-service .form-control {
font-size: 16px;
height: 50px;
padding: 10px 12px; } }
.search-form-service .btn-search {
border-width: 0 0 0 1px; }
.search-form-service .input-group-btn {
z-index: 5; }
.search-form-service.type2 {
max-width: 281px; }
.search-form-service.type2 .form-control {
height: 39px;
padding: 8px 15px; }
.search-form-service.type2 .btn-search {
min-width: 57px;
height: 39px; }
/*Custom Media Quearies */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-10 col-md-offset-1 searchtext-input search-form-service">
<input class="form-control" id="searchInput" type="text" placeholder="Search">
</div>
<div class="row boxes-centered">
<div class="col-md-2 col-md-offset-1 box-item filter-button" data-category="EveryCat">Every Category</div>
<div class="col-md-2 box-item filter-button" data-category="Category1">Category1</div>
<div class="col-md-2 box-item filter-button" data-category="Category2">Category2</div>
<div class="col-md-2 box-item filter-button" data-category="Category3">Category3</div>
<div class="col-md-2 box-item filter-button" data-category="Category4">Category4</div>
</div>
</div>
</div><!-- / container -->
<div id="searchFilterDiv">
<div class="CompanyDirectoryItem" data-name="EveryCat, Category1">
<h3>this belongs to Category1</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category2">
<h3>this belongs to Category2</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3">
<h3>Item belongs to Category3</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name=" EveryCat, Category4">
<h3>Item in Cat 4</h3>
<p> this item belongs to Category4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category4, Category1">
<h3> this belongs to 1 and Category4</h3>
<p>Some text, text about this item that belongs to category 1 and 4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3, Category2">
<h3>Item belongs to Category2 and Category3</h3>
<p>Some text, more text more text more text Category2 and Category3 txoeljljl </p>
some link
</div>
<div class="alert alert-error"></div>
<div class="error search-results-box-item" style="display: none;">
<h3>No Results</h3>
<p> Search gave no results, please try again </p>
</div>
</div> <!-- searchFilterDiv ends -->

You want to search from visible sections only:
$("#searchFilterDiv div.CompanyDirectoryItem:visible").filter(function() {
EDIT
To keep searching/filtering functionality I suggest to use detach/attach:
let tmp=[];
function filter(e) {
if(tmp.length>0)
tmp.map(x => x.appendTo($('#searchFilterDiv')));
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').detach().filter(function () {
if(regex.test($(this).data('name')))
return true
else
tmp.push($(this))
}).appendTo($('#searchFilterDiv'));
}
and now you can use your initial search/filtering function
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {

How can i filter a list of divs when 2 checkboxes are checked using jquery or javascript?

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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 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">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>