How to show or hide a div with only class without ID

[flexi2202]

hello I have a problem I have a purchase order with 500 items, in this example I only put 3 items When I add an item to the cart I would like to be able to display the panel div but just for the item that was put in the cart with the ajouter au panier button But when I click on retirer du panier I want the button to disappear

   ajouter au panier
                   

                 

                   retirer panier
                     
                 

                 ajouter au panier
                  

                 

                   retirer panier
                     
                 

                 ajouter au panier
                   

                 

                   retirer panier

function myFunction() {
var a = document.querySelectorAll(".panel[style*='display:none']");
console.log ("display",a)
a[0].style.display ='block';
}

function myFunction2() {
var b = document.querySelectorAll(".panel[style*='display:block']");
console.log ("display",b)
b[0].style.display ='none';
}

[Richard Deeming]

With the specified markup, the only way to identify the correct panel is to loop through the sibling elements until you find it:

ajouter au panier


retirer panier
  

ajouter au panier


retirer panier
  

ajouter au panier


retirer panier

document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }

e.preventDefault();

let panel = el.nextElementSibling;
while (panel && panel.tagName !== "DIV"){
	panel = panel.nextElementSibling;
}

if (panel) {
	panel.style.display = "block";
}

});

Demo[^] If you can change the markup structure so that each link and panel have a wrapper element, then it becomes slightly easier:

ajouter au panier
  



    retirer panier
      


ajouter au panier
  



    retirer panier
      


ajouter au panier

[flexi2202]

thank you for the answer and the help, it's appreciated this works perfectly fine to display "retirer panier" But how to hide "retirer panier" when you click on "retirer panier"

[Richard Deeming]

With the original markup:

const showPanel = el => {
let panel = el.nextElementSibling;
while (panel && panel.tagName !== "DIV"){
panel = panel.nextElementSibling;
}

if (panel) {
	panel.style.display = "block";
}

};

const hidePanel = el => {
const panel = el.closest(".panel");
if (panel) {
panel.style.display = "none";
}
};

document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el) { return; }

if (el.classList.contains("b-items\_\_item\_\_add-to-cart")) {
	e.preventDefault();
	showPanel(el);
} else if (el.classList.contains("ajouter-panier")) {
	e.preventDefault();
	hidePanel(el);
}

});

Demo[^] With the modified markup:

document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("ajouter-panier")) { return; }

const card = el.closest(".item-card");
if (!card) { return; }

const panel = card.querySelector(".panel");
if (!panel) { return; }

e.preventDefault();

if (el.classList.contains("b-items\_\_item\_\_add-to-cart")) {
	panel.style.display = "block";
} else if (el.classList.contains("ajouter-panier")) {
	panel.style.display = "none";
}

});

Demo[^]

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

[flexi2202]

a very big thank you, really thank you for this code on first try it works great I'm going to do a bigger test. I'll keep you informed

[flexi2202]

Excuse me for disturbing you. I just tried the code on my site, but I have a little compatibility problem with what already exists on my site. maybe you could help me When I add an item to my cart I have an animation that drives the item into its shopping cart. for your code to work I have to deactivate part of my code from line 29 to 34, but in this case I no longer have my animation Could you help me please testaffichercacher - JSFiddle - Code Playground[^]

[flexi2202]

thank you very much for the explanations and the code But when I click on "retirer du panier" the button no longer disappears

[Richard Deeming]

The code sample has a few script errors, particularly around a missing .b-cart element and a missing external reference. Beyond that, since you're using jQuery, you don't need the code from my previous answers. Within the "add-to-cart" click event handler, you just need to add:

var panel = item.find('.panel');
panel.show();

To hide the panel when its nested link is clicked, add:

$(document).on('click', '.panel a.ajouter-panier', function(evt){
this.closest('.panel').style.display = 'none';
});

testaffichercacher - JSFiddle - Code Playground[^]

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

[flexi2202]

hello you are the best a very big roof thank you, it's great it works wonderfully

[Member_15931829]

hello

hello you are the best a very big roof thank you, it's great it works wonderfully

I had to create a new account just to thank you, because the other account the forum no longer knows how to send me a password

[Ben A Johnson]

Why didn't you use "visibility:hidden" instead of "display:none"?