We Keep Coding

How to achieve different reactions at the first and second button click when there are many the same buttons? (Filter in js)

there is a filter on the js, which consists of three identical buttons (named "green", "yellow", "red"), which are responsible for setting/removing the blur effect for the set of pictures located below.
When pressing the "green" button, a blur effect should be set for all pictures that have a value "green" of data-card property.
At the second click on the same button, the blur effect should be canceled for this category of pictures.
I solved this problem with a reception with a boolean flag:
let firstClick = true;
if (firstClick){
//..do at first click
firstClick = !firstClick;
}
else{
//..do at second click
firstClick = !firstClick;
}
However, the problem occurs when I click on the "green" button (this is the first click on the "green" button), and after that on another button, for example "red" (this is the first click on the "red" button). But the compiler perceives a click on the "red" button as a second click, although it is a different button.
The question is how to distinguish the behavior in different buttons?
In general, I solved the problem through a complete search and many if statements. Maybe there is an alternative way?
Project demo in codepen
//main.js
function app() {
const buttons = document.querySelectorAll('.service__btn');
const cards = document.querySelectorAll('.service__item');
let firstClick = true;
function setBlour(listOfCards) {
listOfCards.forEach(item => {
if (item.classList.contains(currentCategory)) {
item.classList.add('blur');
}
});
}
function resetBlour(listOfCards) {
listOfCards.forEach(item => {
if (item.classList.contains(currentCategory)) {
item.classList.remove('blur');
}
});
}
function highlightButton(butt) {
if (!butt.classList.contains('service__btn__clicked')) {
butt.classList.add('service__btn__clicked');
}
firstClick = !firstClick;
}
function unhighlight(butt) {
if (butt.classList.contains('service__btn__clicked')) {
butt.classList.remove('service__btn__clicked');
}
firstClick = !firstClick;
}
buttons.forEach(button => {
button.addEventListener('click', (event) => {
currentCategory = event.target.dataset.filter; //current category we get from clicked button
let matchedCards = document.querySelectorAll(`[data-card="${button.dataset.filter}"]`);
//is it first click?
if (firstClick) {
if (!matchedCards[0].classList.contains('blur')) { // each click we have set of matchedCards, it's easy to check one of them (the first for example) if it have blur
setBlour(matchedCards);
highlightButton(button);
} else { //it is a first clcik, but card have blur - so remove blur
resetBlour(matchedCards);
unhighlight(button);
}
}
//second click
else {
if (!matchedCards[0].classList.contains('blur')) { //if there is no blur - add blur
setBlour(matchedCards);
highlightButton(button);
} else { //second click and blur is present - so we need to remove it
resetBlour(matchedCards);
unhighlight(button);
}
}
});
});
}
app()
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
.container {
width: 1220px;
margin: 0 auto;
}
.service {
background: #EDF2EC;
padding-top: 40px;
padding-bottom: 70px;
}
.service__top {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.service__top-title {
font-family: 'Inika', serif;
font-weight: 400;
font-size: 40px;
line-height: 52px;
color: #499A18;
max-width: 306px;
}
.service__filter-btn {
margin-left: 142px;
}
.service__btn {
border: 1px solid #E06733;
border-radius: 5px;
padding: 12px 40px;
font-family: 'Inika', serif;
font-weight: 400;
font-size: 20px;
line-height: 26px;
color: #E06733;
}
.service__btn__clicked {
background: #E06733;
border: 1px solid #E06733;
border-radius: 5px;
color: #FFFFFF;
}
.service__btn+.service__btn {
margin-left: 32px;
}
.service__content {
column-count: 3;
gap: 0 116px;
}
.service__item {
margin-bottom: 55px;
text-align: center;
width: 330px;
height: 350px;
border-radius: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.service__item-title {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 20px;
color: #E06733;
margin-top: 10px;
margin-bottom: 10px;
}
.service__item-text {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #717171;
margin-bottom: 36px;
}
.service__item-description {
border-radius: 0px 0px 20px 20px;
border: 1px solid #e3e1d5;
display: none;
}
.blur {
filter: blur(5px);
}
.animation {
transform: scale(0);
opacity: 0;
}
<body>
<section class="service">
<div class="container">
<div class="service__top">
<h3 class="service__top-title">
Caption and Description
</h3>
<div class="service__filter-btn">
<button class="service__btn service__btn-type_green" data-filter="green"> Green</button>
<button class="service__btn service__btn-type_yellow" data-filter="yellow">Yellow</button>
<button class="service__btn service__btn-type_red" data-filter="red">Red</button>
</div>
</div>
<div class="service__content">
<div class="service__item green" data-card="green">
<div class="service__item-description">
<h4 class="service__item-title">Green color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item red" data-card="red">
<div class="service__item-description">
<h4 class="service__item-title">Red color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item yellow" data-card="yellow">
<div class="service__item-description">
<h4 class="service__item-title">Yellow color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item red" data-card="red">
<div class="service__item-description">
<h4 class="service__item-title">Red color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item green" data-card="green">
<div class="service__item-description">
<h4 class="service__item-title">Green color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
<div class="service__item red" data-card="red">
<div class="service__item-description">
<h4 class="service__item-title">Red color</h4>
<p class="service__item-text">Description</p>
</div>
</div>
</div>
</div>
</section>
</body>

Call map function on DIV and create array

Situation:
I created a HTML Grid, the div's can be replaced by using jquery sort (drag and drop). Users can change the order of this grid. When the users press the save button function getMapping(); is called.
The function getMapping(); gets the order of the div's by id.
Inside the "map" loop i have created an if/else function to see if the id is an header div or not. When i check the function with console.log i have no errors and receive the correct array data ( console.log(getMapping());
The issue:
When i try to send the created array from getMapping(); trough ajax i receive a error (1). The error only occurs when i try to send variable with Ajax. So the function creates the array correctly but when i trying to send the array to Ajax i receive error (1)
(1) Error on send using ajax: Uncaught TypeError: 'click' called on an object that does not implement interface HTMLElement.
$(".dropzone").sortable({
connectWith: ".dropzone",
update: function(event, ui) {
showResult();
},
placeholder: "dashed"
});
var headerCount = 1;
function addHeader() {
$(".dropzone").prepend(
$("#prefab-header")
.clone()
.attr("id", "header-" + headerCount)
.html("Header " + headerCount++)
);
}
function showResult() {
var arr = $(".dropzone > div").map(function() {
return this.id;
});
$("#result").html("");
$("#result").append(arr.get().join(", "));
}
function getMapping() {
var sort = 1;
var data = $(".dropzone > div").map(function() {
var array = [];
var add = {};
if (this.id.includes("head-")) {
add["data"] = 0;
add["name"] = this.innerText;
add["sort"] = sort++;
array.push(add);
} else {
add["data"] = this.id;
add["sort"] = sort++;
array.push(add);
}
return array;
});
return data;
}
function sendAjax() {
var data = getMapping();
console.log(data);
/*
$.ajax({
url: "cal-admin.php",
type: "post",
data: { data: data },
success: function (response) {}
});
*/
}
.grid-view {
margin-top: 50px;
width: 700px;
background-color: #f5f2f2;
padding: 50px;
min-height: 350px;
}
.grid-trash {
margin-top: 20px;
width: 700px;
background-color: #f5f2f2;
color: #999;
padding: 10px;
height: 50px;
padding: 10px;
border: 2px dashed #999;
text-align: center;
}
.grid-trash-hover {
background-color: #f34541;
color: #fff;
border: 2px dashed #fff;
}
.grid-result {
margin-top: 20px;
width: 700px;
background-color: #f5f2f2;
padding: 10px;
height: 100px;
}
.grid-users {
background: #f5f5f5;
padding-bottom: 20px;
padding-top: 20px;
padding-right: 0px;
padding-left: 0px;
cursor: move;
border: #000 1px solid;
text-align: center;
font-weight: bold;
}
.grid-header {
background: #34bdeb;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
cursor: move;
border: #000 1px solid;
text-align: center;
font-weight: bold;
}
.dashed {
border: 2px dashed #999;
background: #ede8e8;
height: 75px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container ">
<div class="row justify-content-center align-items-center">
<div class="grid-view">
<div style="padding-bottom: 10px">
<button type="button" class="btn btn-primary" onclick="addHeader();">Add header</button>
<button type="button" class="btn btn-info" onclick="showResult();">Display DIV id order</button>
</div>
<div id="dropzone" class="dropzone">
<div id="team-1" class="grid-users">TEAM 1</div>
<div id="team-2" class="grid-users">TEAM 2</div>
</div>
<div style="margin-top: 20px">
<button type="button" class="btn btn-info" onclick="sendAjax();">Send Ajax</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="grid-result">
<span><b>Console log:</b></span>
<div id="result" style="height: 50px; padding: 10px; border: 2px dashed #999"></div>
</div>
</div>
</div>
<div style="display:none">
<div id="prefab-header" class="drag grid-header"></div>
</div>

I have moved my var array out of the map() function which results in Ajax accepting the variable and sending it to PHP.
function getMapping() {
var sort = 1;
var arr = $("#dropzone > div").map(function () {
return this.id;
});
var array = [];
for (const a of arr) {
var add = { };
console.log(a)
if (a.includes('head-')) {
add['data'] = 0;
add['sort'] = sort++;
array.push(add);
} else {
add['data'] = a.id;
add['sort'] = sort++;
array.push(add);
}
}
return array;
}

How do I add/remove div color onclick of the div but not the button?

I have an add and remove button which selects the complete div and adds a green color to the div. The function only works on the "add this extra" and "remove" button. How do I make it work like clicking anywhere on the div instead of the particular button itself?
I would look to hear someone help from you guys.
Regards,
Bilal
$('.btn_extras').addClass('force-hide');
$('.btn-rmv-item').hide();
// Add btn onClick
$('.btn-add-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).next("button.btn-rmv-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").addClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// Remove btn onClick
$('.btn-rmv-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).prev("button.btn-add-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").removeClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// function to Show/Hide Continue Button w.r.t SELECTIONS
function showHideContinueBtn() {
$('.btn_extras').addClass('force-hide').removeClass('force-block');
$('.btn_skip').removeClass('force-hide').addClass('force-block');
$('div.card').each(function(index) {
if($(this).hasClass('card-bg')) {
$('.btn_extras').removeClass('force-hide').addClass('force-block');
$('.btn_skip').removeClass('force-block').addClass('force-hide');
}
});
}
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button class="btn btn-add-item">Add this extra</button>
<button class="btn btn-rmv-item">Remove</button>
</div>
<div class="clearfix"></div>
</div>

You can have the click handler directly on the div (I assume it is .card-border here).
And you need only one button which you toggle the classes and change the text.
I added a .card-bg CSS rule that seemed to be missing in the question...
I also added type="button" to prevent form submission if the button is clicked.
Have a look at the comments in the code below. It replaces the two click handlers you had... And the showHideContinueBtn() function.
$(".card-border").on("click",function(){
// Toggle the div background color
$(this).toggleClass("card-bg");
// Find the button
var btn = $(this).find(".btn");
// Toggle classes for ONE button
btn.toggleClass('btn-add-item btn-rmv-item');
// Depending on a button's class, change it's text
(btn.hasClass("btn-rmv-item"))?btn.text("Remove"):btn.text("Add this extra");
});
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
/* This class was not posted in question... So I improvised one */
.card-bg{
background-color:#44bb44;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
<!--button class="btn btn-rmv-item">Remove</button-->
</div>
<div class="clearfix"></div>
</div>

Change
$('.btn-add-item').on('click', function(e) {
to
$(e.currentTarget).closest("div.card-border").on('click', function(e) {
If you want a toggle functionality, also add a variable that holds the crt state:
var state="default";
...on('click',function(){
if(state=='default'){
state='checked';
....
} else {
state='default';
....
}
});

If I understood you question right then this is answer you are looking for.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
This Div's background color will change.
</p>
<script>
var color=0;
function myFunction() {
// Just Specify The Id you need
var myDiv = document.getElementById("demo");
if(color == 0)
{
myDiv.style.backgroundColor = "red"; color=1;
}
else
{
myDiv.style.backgroundColor = "white"; color=0;
}
}
</script>
</body>
</html>
Hope This Solves the Issue.

Swapping an image when a toggle has been clicked on

I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example

I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

how to finalize the spoiler

There is a code http://jsfiddle.net/VWCnd/5/. How to add the indicators ↓ ↑.
Example image http://i.stack.imgur.com/OxpaP.png
Js:
$(document).ready(function(){
$('.spoiler_title').click(function(){
$(this).parent().children('div.spoiler_toggle').toggle();
return false;
});
});
html:
<div>
Title
<div class="spoiler_toggle">
<div class="spoiler_bg">Body</div>
</div>
</div>
CSS:
.spoiler_title {
display:block;
background-color: #551A8B;
color: #fff;
padding: 10px 10px;
}
.spoiler_toggle {
display:none;
}
.spoiler_bg {
background: #9C6AC9;
padding: 5px 5px;
}
Thanks.

You could always do something like this:
http://jsfiddle.net/VWCnd/7/
$('.spoiler_title').click(function(){
var $this = $(this),
visible = $this.parent().children('div.spoiler_toggle').toggle().is(':visible');
$this.find('.spoiler_indicator').html(visible? '↑' : '↓');
return false;
});

HERE IS THE DEMO
CODE -
JS:
$(document).ready(function(){
$('.spoiler_title').click(function(){
$(this).find(".sp_but").text(($(this).find(".sp_but").text() == '↓' ? '↑' : '↓'))
$(this).parent().children('div.spoiler_toggle').toggle();
return false;
});
});
HTML:
<div>
Title <span class="sp_but">↓</span>
<div class="spoiler_toggle">
<div class="spoiler_bg">Body</div>
</div>
</div>
CSS:
.spoiler_title {
display:block;
background-color: #551A8B;
color: #fff;
padding: 10px 10px;
}
.spoiler_toggle {
display:none;
}
.sp_but{
float: left;
margin-right:20px;
}
.spoiler_bg {
background: #9C6AC9;
padding: 5px 5px;
}