Click here to Skip to main content
15,867,594 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionHow to show or hide a div with only class without ID Pin
flexi220220-Feb-23 6:36
flexi220220-Feb-23 6:36 
AnswerRe: How to show or hide a div with only class without ID Pin
Richard Deeming20-Feb-23 21:54
mveRichard Deeming20-Feb-23 21:54 
With the specified markup, the only way to identify the correct panel is to loop through the sibling elements until you find it:
HTML
<a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
    ajouter au panier
</a><br>

<div class="panel" style="display:none">
    <a data-qte2="0" class=" ajouter-panier ">
        retirer panier
    </a><br>
</div>
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
    ajouter au panier
</a><br>

<div class="panel" style="display:none">
    <a data-qte2="0" class=" ajouter-panier ">
        retirer panier
    </a><br>
</div>
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
    ajouter au panier
</a><br>

<div class="panel" style="display:none">
    <a data-qte2="0" class=" ajouter-panier ">
        retirer panier
    </a>
</div>
JavaScript
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:
HTML
<div class="item-card">
    <a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
        ajouter au panier
    </a><br>

    <div class="panel" style="display:none">
        <a data-qte2="0" class=" ajouter-panier ">
            retirer panier
        </a><br>
    </div>
</div>
<div class="item-card">
    <a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
        ajouter au panier
    </a><br>

    <div class="panel" style="display:none">
        <a data-qte2="0" class=" ajouter-panier ">
            retirer panier
        </a><br>
    </div>
</div>
<div class="item-card">
    <a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
        ajouter au panier
    </a><br>

    <div class="panel" style="display:none">
        <a data-qte2="0" class=" ajouter-panier ">
            retirer panier
        </a>
    </div>
</div>
JavaScript
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; }
	
	const card = el.closest(".item-card");
	if (!card) { return; }
	
	const panel = card.querySelector(".panel");
	if (!panel) { return; }
	
	e.preventDefault();
	panel.style.display = "block";
});
Demo[^]

In either case, it's best to avoid the onclick attribute, and wire up the event handlers in code. In this case, I've used event delegation[^], which is generally more efficient than adding handlers to multiple elements, and also allows the code to handle events on elements which are added to the DOM at some later time.



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

GeneralRe: How to show or hide a div with only class without ID Pin
flexi220221-Feb-23 0:03
flexi220221-Feb-23 0:03 
GeneralRe: How to show or hide a div with only class without ID Pin
Richard Deeming21-Feb-23 1:43
mveRichard Deeming21-Feb-23 1:43 
GeneralRe: How to show or hide a div with only class without ID Pin
flexi220221-Feb-23 1:59
flexi220221-Feb-23 1:59 
GeneralRe: How to show or hide a div with only class without ID Pin
flexi220221-Feb-23 3:41
flexi220221-Feb-23 3:41 
GeneralRe: How to show or hide a div with only class without ID Pin
Richard Deeming21-Feb-23 22:11
mveRichard Deeming21-Feb-23 22:11 
AnswerRe: How to show or hide a div with only class without ID Pin
Ben A Johnson24-Apr-23 3:48
Ben A Johnson24-Apr-23 3:48 
Questionwant to help in javascript code Pin
Member 1592799418-Feb-23 4:33
Member 1592799418-Feb-23 4:33 
AnswerRe: want to help in javascript code Pin
Richard Deeming19-Feb-23 21:56
mveRichard Deeming19-Feb-23 21:56 
QuestionJavascript Pin
niveditha2216-Feb-23 22:20
niveditha2216-Feb-23 22:20 
AnswerRe: Javascript Pin
CHill6016-Feb-23 22:21
mveCHill6016-Feb-23 22:21 
QuestionHow do I make an Element slide-in, after user selects choice from drop-down, then it slides out. Pin
Garry 202316-Feb-23 12:07
Garry 202316-Feb-23 12:07 
Questionapi connection culendar Pin
jagadeesh omkaram14-Feb-23 19:00
jagadeesh omkaram14-Feb-23 19:00 
AnswerRe: api connection culendar Pin
Richard MacCutchan14-Feb-23 22:05
mveRichard MacCutchan14-Feb-23 22:05 
AnswerRe: api connection culendar Pin
Dave Kreskowiak15-Feb-23 1:32
mveDave Kreskowiak15-Feb-23 1:32 
QuestionCopying from billing address to mailing address if they are the same not working correctly Pin
samflex11-Feb-23 12:15
samflex11-Feb-23 12:15 
AnswerRe: Copying from billing address to mailing address if they are the same not working correctly Pin
Richard Deeming12-Feb-23 22:02
mveRichard Deeming12-Feb-23 22:02 
GeneralRe: Copying from billing address to mailing address if they are the same not working correctly Pin
samflex13-Feb-23 5:14
samflex13-Feb-23 5:14 
QuestionAjax didn't work for cloning rows, But works for first row only Pin
amr aly3-Feb-23 8:35
amr aly3-Feb-23 8:35 
AnswerRe: Ajax didn't work for cloning rows, But works for first row only Pin
amr aly9-Feb-23 5:35
amr aly9-Feb-23 5:35 
QuestionI am using javascript to convert a large table to a pdf Pin
Zahira CHOUIBA26-Jan-23 3:22
Zahira CHOUIBA26-Jan-23 3:22 
QuestionRe: I am using javascript to convert a large table to a pdf Pin
Jeremy Falcon26-Jan-23 8:02
professionalJeremy Falcon26-Jan-23 8:02 
AnswerRe: I am using javascript to convert a large table to a pdf Pin
RickyJudith8-Feb-23 0:24
RickyJudith8-Feb-23 0:24 
QuestionI have problem importing images of Json File on HTML Table Pin
Member 1590151922-Jan-23 2:14
Member 1590151922-Jan-23 2:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.