Develop Reference

How to do an accordion with HTML and JS

I want an accordion to drop down when a user clicks on the greater than sign.
<div class="row">
<div class="col-2">
<p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1"></i></button></p>
</div>
<div class="col-3">
<P>Omodeko Divine</P>
</div>
<div class="col-2">
<p>EE</p>
</div>
<div class="col-3">
<p>[ETHIOPE EAST]</p>
<P>DELSU HEALTH CENTER ABRAKA</P>
</div>
<div class="col-2">
<button class="btn btn-primary">GENERATE ID</button>
</div>
<div class="panel" onclick="document.getElementByclassname(panel).style.display='none'">
<p>No, but there must be adequate evidence that would help to support your claim.</p>
</div>
</div>
This is the javascript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("activee");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}});}
On click of the greater than sign, the .panel is supposed to dropdown.

Add onclick event to the greater than icon
Next add id to .panel div
Next in script write the logic for hide and show, please refer to below code snippet
function showDropDown(){
const targetDiv = document.getElementById("panelDivId");
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
}
<div class="row">
<div class="col-2">
<p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1" onclick="showDropDown()">greaterThanIcon</i></button></p>
</div>
<div class="col-3">
<P>Omodeko Divine</P>
</div>
<div class="col-2">
<p>EE</p>
</div>
<div class="col-3">
<p>[ETHIOPE EAST]</p>
<P>DELSU HEALTH CENTER ABRAKA</P>
</div>
<div class="col-2">
<button class="btn btn-primary">GENERATE ID</button>
</div>
<div class="panel" id="panelDivId" onclick="document.getElementByclassname(panel).style.display='none'">
<p>No, but there must be adequate evidence that would help to support your claim.</p>
</div>
</div>

Amp-script does not show the result for addEventListener "load"

I want to copy all A to B. Using plain javascript, it works as it is. But it does not work when I use amp-script. It also doesn't show any error(s).
A
<div class="harga">111</div>
<div class="harga">222</div>
<div class="harga">333</div>
B
<div class="showHargaProd"></div>
<div class="showHargaProd"></div>
<div class="showHargaProd"></div>
Javascript
<script>
function getAndShow(){
let sources = document.querySelectorAll('.harga');
let dests = document.querySelectorAll('.showHargaProd');
for (let i = 0; i < sources.length; i++){
if (dests[i]){
dests[i].innerHTML = sources[i].innerHTML;
}
}
}
document.addEventListener('DOMContentLoaded', getAndShow);
</script>
Here's all my codes
<amp-script layout='container' script='inline_amp'>
<div class='container_slide'>
<div class='prod_price'><b class='showHargaProd'><!--111--></b></div>
<div class='overlay'>
<div class='text'><b>BELI</b></div>
</div>
</div>
<div class='container_slide'>
<div class='prod_price'><b class='showHargaProd'><!--222--></b></div>
<div class='overlay'>
<div class='text'><b>BELI</b></div>
</div>
</div>
<div class='container_slide'>
<div class='prod_price'><b class='showHargaProd'><!--333--></b></div>
<div class='overlay'>
<div class='text'><b>BELI</b></div>
</div>
</div>
<p id="hrg1" class="harga">111</p>
<p id="hrg2" class="harga">222</p>
<p id="hrg3" class="harga">333</p>
</amp-script>
<script id="inline_amp" type="text/plain" target="amp-script">
function getAndShow(){
let sources = document.querySelectorAll('.harga');
let dests = document.querySelectorAll('.showHargaProd');
for (let i = 0; i < sources.length; i++){
if (dests[i]){
dests[i].innerHTML = sources[i].innerHTML;
}
}
}
document.addEventListener('DOMContentLoaded', getAndShow);
</script>

Finally I use time (seconds) to trigger the DOM, as in:
HTML
<input id='nTrigger' name='nTrigger' type='hidden' value='0'/>
<input id='nCheck' name='nCheck' type='hidden' value=''/>
JS
var dy = new Date();
var n = dy.getSeconds();
var trig = document.getElementById('nTrigger').value;
document.getElementById('nCheck').value = n;
if (trig !== n) getAndShow();
Here's trig would never equal as n forever since seconds has no zero value and it will show the result I wish.
Stupid of me, I actually can use directly or call function getAndShow() when the layout is responsive with fixed height and width (size must be included).
What I want is how to load the class showHargaProd when user load the page, and It solved successfully.
Here's all the codes:
Note: layout='container' must be changed into layout='responsive' (see issue in related to layout system and gestures: https://github.com/ampproject/amphtml/issues/28361#issuecomment-628779575) and How to show popup on AMP page after setTimeout
Or, we can use flex-item Layout to make it properly in container
<amp-script layout='flex-item' script='inline_amp'>
<div class='container_slide'>
<div class='prod_price'><b class='showHargaProd'><!--111--></b></div>
<div class='overlay'>
<div class='text'><b>BELI</b></div>
</div>
</div>
<div class='container_slide'>
<div class='prod_price'><b class='showHargaProd'><!--222--></b></div>
<div class='overlay'>
<div class='text'><b>BELI</b></div>
</div>
</div>
<div class='container_slide'>
<div class='prod_price'><b class='showHargaProd'><!--333--></b></div>
<div class='overlay'>
<div class='text'><b>BELI</b></div>
</div>
</div>
<p id="hrg1" class="harga">111</p>
<p id="hrg2" class="harga">222</p>
<p id="hrg3" class="harga">333</p>
<input id='nTrigger' name='nTrigger' type='hidden' value='0'/>
<input id='nCheck' name='nCheck' type='hidden' value=''/>
</amp-script>
<script id="inline_amp" type="text/plain" target="amp-script">
function getAndShow(){
let sources = document.querySelectorAll('.harga');
let dests = document.querySelectorAll('.showHargaProd');
for (let i = 0; i < sources.length; i++){
if (dests[i]){
dests[i].innerHTML = sources[i].innerHTML;
}
}
}
//document.addEventListener('DOMContentLoaded', getAndShow);
var dy = new Date();
var n = dy.getSeconds();
var trig = document.getElementById('nTrigger').value;
document.getElementById('nCheck').value = n;
if (trig !== n) getAndShow();
</script>
More: (trig !== n) in fact, it would never equal and therefore, it triggers the function getAndShow() (that is almost the same as DOMContentLoaded).

JavaScript Uncaught TypeError - Shopping Cart Total

I'm finishing the project and I'm struggling with couple things:
1 Shopping Cart in javascript
I expected <p class="subTotal">$ 0</p> to update after adding, or deleting elements from the shopping cart. Instead, when I add element to the shopping cart, p.subTotal updates 2x the price of dish.
The next one is deleting elements from the shopping cart. When I do that, the console return this:
Console screenshot #1
2 Removing the object
To remove object from the shopping cart I had to select parent of the parent of the button.
Inside the button I've put the svg icon. Somehow, when I click on svg icon, javascript code selects parent of the parent of the svg instead of the button's.
3 Adding dishes to the shopping cart
I've put <a href="#" class="addToCart"> inside of <div class="food">.
This action results in console, showing me another error:
Console screenshot #2
If You can answer even one question I will really appreciate that.
I have only few hours left to finish it.
Code:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready);
} else {
ready();
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('trash');
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
var quantityInputs = document.getElementsByClassName('quantity');
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i];
input.addEventListener('change', quantityChanged);
}
var addToCart = document.getElementsByClassName('addToCart');
for (var i = 0; i < addToCart.length; i++) {
var button = addToCart[i];
button.addEventListener('click', addToCartClicked);
}
}
function removeCartItem(event) {
var buttonClicked = event.target;
buttonClicked.parentElement.parentElement.remove();
updateCartTotal();
}
function quantityChanged(event) {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal();
}
function addToCartClicked(event) {
var button = event.target;
var shopItem = button.parentElement;
var title = shopItem.getElementsByClassName('name')[0].innerText;
var price = shopItem.getElementsByClassName('price')[0].innerText;
var imageSrc = shopItem.getElementsByClassName('foodImg')[0].src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
function addItemToCart(title, price, imageSrc) {
var product = document.createElement('div');
product.classList.add('product');
var basket = document.getElementsByClassName('basket')[0];
var productContents = `
<div class="product">
<div class="productInfo">
<div class="productName">
<img src="${imageSrc}" alt="Spicy seasoned seafood noodles">
<div>
<p class="productTitle">${title}</p>
<p class="money">${price}</p>
</div>
</div>
<input class="quantity" type="text" value="1">
<p class="cash">${price}</p>
</div>
<div class="note">
<input type="text" placeholder="Order Note...">
<button class="trash"><svg width="24" height="24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.8789 8.71882L18.9784 8.72017C19.3475 8.75069 19.6304 9.05716 19.65 9.42605L19.6405 9.63174L19.326 13.483L18.9961 17.2414C18.9263 17.9917 18.8638 18.6245 18.8099 19.1227C18.6225 20.8588 17.4955 21.9323 15.7966 21.9641C13.1494 22.013 10.6048 22.0125 8.13373 21.9591C6.48398 21.9244 5.37366 20.8393 5.18955 19.1297L5.0623 17.8702L4.83994 15.427L4.61216 12.7461L4.35172 9.52788C4.31935 9.11498 4.61951 8.75335 5.02215 8.72016C5.39123 8.68973 5.7183 8.94584 5.79519 9.30677L5.82511 9.60173L6.06966 12.6187L6.33669 15.7459C6.45646 17.0996 6.56034 18.1952 6.64346 18.9648C6.74838 19.939 7.26138 20.4404 8.16411 20.4593C10.6159 20.5124 13.1415 20.5129 15.7701 20.4643C16.7277 20.4464 17.2488 19.9499 17.356 18.9574L17.4827 17.7046C17.5198 17.3185 17.5594 16.8923 17.6013 16.4293L17.8686 13.3538L18.1906 9.4075C18.2204 9.02902 18.5192 8.7389 18.8789 8.71882ZM3.73139 6.98918C3.32745 6.98918 3 6.65338 3 6.23916C3 5.85945 3.27515 5.54564 3.63214 5.49597L3.73139 5.48913H6.91772C7.29636 5.48913 7.62785 5.23928 7.74642 4.87929L7.77543 4.76813L8.02304 3.50533C8.24111 2.66897 8.9492 2.07349 9.779 2.00633L9.93592 2H14.0639C14.9075 2 15.6523 2.54628 15.9391 3.39039L15.9874 3.55209L16.2243 4.76783C16.2987 5.14872 16.6025 5.4332 16.9701 5.48177L17.0821 5.48913H20.2686C20.6725 5.48913 21 5.82493 21 6.23916C21 6.61887 20.7248 6.93267 20.3679 6.98234L20.2686 6.98918H3.73139ZM14.0639 3.50006H9.93592C9.7307 3.50006 9.54829 3.62322 9.47252 3.77803L9.44682 3.84604L9.20979 5.06238C9.1808 5.21084 9.13879 5.3538 9.08512 5.49012L14.9148 5.49031C14.8813 5.40526 14.8523 5.31763 14.8282 5.22768L14.79 5.06208L14.5636 3.8928C14.5107 3.68991 14.3473 3.54138 14.1502 3.50742L14.0639 3.50006Z" />
</svg></button>
</div>
</div>`;
product.innerHTML = productContents;
basket.append(product);
product
.getElementsByClassName('trash')[0]
.addEventListener('click', removeCartItem);
product
.getElementsByClassName('quantity')[0]
.addEventListener('change', quantityChanged);
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('basket')[0];
var products = cartItemContainer.getElementsByClassName('product');
var total = 0;
for (var i = 0; i < products.length; i++) {
var product = products[i];
var priceElement = product.getElementsByClassName('money')[0];
var quantityElement = product.getElementsByClassName('quantity')[0];
var price = parseFloat(priceElement.innerText.replace('$', ''));
var quantity = quantityElement.value;
total = total + price * quantity;
}
total = Math.round(total * 100) / 100;
document.getElementsByClassName('subTotal')[0].innerText = '$ ' + total;
}
// Date in header
var dt = new Date();
document.getElementById('datetime').innerHTML = dt.toLocaleDateString();
<div id="foodCard">
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 1.png" alt="Spicy seasoned seafood noodles">
<div class="text">
<p class="name">Spicy seasoned seafood noodles</p>
<div>
<p class="price">$ 2.29</p>
<p class="availability">20 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 2.png" alt="Salted Pasta with mushroom sauce">
<div class="text">
<p class="name">Salted Pasta with mushroom sauce</p>
<div>
<p class="price">$ 2.69</p>
<p class="availability">11 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 3.png" alt="Beef dumpling in hot and sour soup">
<div class="text">
<p class="name">Beef dumpling in hot and sour soup</p>
<div>
<p class="price">$ 2.99</p>
<p class="availability">16 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 5.png" alt="Spicy seasoned seafood noodles">
<div class="text">
<p class="name">Spicy seasoned seafood noodles</p>
<div>
<p class="price">$ 2.29</p>
<p class="availability">20 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<section id="order">
<div id="container">
<header>
<h2>Orders #34562</h2>
<div id="selector">
<button class="active">Dine in</button>
<button>To Go</button>
<button>Delivery</button>
</div>
<div id="description">
<p>Item</p>
<p>Qty</p>
<p>Price</p>
</div>
</header>
<div class="basket">
</div>
<div id="bottom">
<div id="total">
<div id="discount">
<p>Discount</p>
<p>$0</p>
</div>
<div id="subTotal">
<p>Sub total</p>
<p class="subTotal">$ 0</p>
</div>

I couldn't have time to go through the full code, but I had an observation. document.getElementsByClassName('subTotal')[0].innerText = '$ ' + total;, is the getElementsByClassName('subTotal') returning a element or just returning undefined? Because, you can't access innerHTML from undefined.
Also, is shopItem.getElementsByClassName('foodImg')[0] not undefined? If it is undefined, then you will get src of undefined error. Is there an element with class name foodImg?

javascript - display in a random order everytime page is refreshed

What should I do to make this display in a random order every time the page is refreshed.
here's what I added on my WordPress text editor and it displays the images perfectly fine but it does not randomize the order of the divs. What did I do wrong?
<br><br>
<div class="quiz">
<a href="http://www.thequizmania.com/we-bet-you-cant-pass-this-tricky-general-knowledge-quiz/">
<img src="http://i.imgur.com/3YcBoyN.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/what-kind-of-traveler-are-you/">
<img src="http://i.imgur.com/GZn9myC.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/what-two-words-describe-you-as-a-mother/">
<img src="http://i.imgur.com/QnJezBF.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/can-you-pick-the-correct-word/">
<img src="http://i.imgur.com/Pdi9dyo.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/can-you-pass-this-almost-impossible-shapes-test/">
<img src="http://i.imgur.com/Ov5WdOg.jpg"></img>
<a>
</div>
<br>
<script>
var cards = $(".quiz");
for(var i = 0; i < cards.length; i++){
var target = Math.floor(Math.random() * cards.length -1) + 1;
var target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}
</script>

Your code works fine.
I just:
Fixed <a> tag
Added Jquery library
Here your code on Jsfiddle

You can randomize it with Math.random.
var divContents = ['<br><div class="quiz"><img src="http://i.imgur.com/Ov5WdOg.jpg"></div>', 'second', 'thrid', '4th', '5th', '6th'];
var len = divContents.length;
var parent = document.getElementById('parent');
for(i=0;i<len;i++) {
var random = Math.floor(Math.random()*(divContents.length));
parent.innerHTML += (divContents[random]);
divContents.splice(random, 1);
}
<div id="parent">
</div>

Accordion with javascript

I've been trying to get an accordion movement going with javascript.
The problem that I'm having is having one close if it's already open and stay closed.
Right now the according closing one and opening another when I click a different div.
I see that the argument is always resolving to true because I'm removing the classes.. but I can't seem to find a away to get around that so I could have a nice accordion.
<div class="speaker-container">
<div class="span3 offset1 speaker" id="sp-info-0">
<div class="speaker-img">
<div class="hover"></div>
<img src="" alt="">
</div>
<h4>Title</h4>
</div>
<div class="speaker-info" id="sp-info-0">
<button class="close-speaker">Close</button>
<h2>Title</h2>
</div>
<div class="span3 offset1 speaker" id="sp-info-1">
<div class="speaker-img">
<div class="hover"></div>
<img src="" alt="">
</div>
<h4>Sub Title</h4>
</div>
<div class="speaker-info" id="sp-info-1">
<button class="close-speaker">Close</button>
<h2>Title</h2>
</div>
<div class="span3 offset1 speaker" id="sp-info-2">
<div class="speaker-img">
<div class="hover"></div>
<img src="" alt="">
</div>
<h4>Title</h4>
</div>
<div class="speaker-info" id="sp-info-2">
<button class="close-speaker">Close</button>
<h2>Title</h2>
</div>
</div>
var timer;
$('.speaker-container .speaker').on('click', function(){
var speakerContainer = document.getElementsByClassName('speaker-container');
var self = this;
var children = $('.speaker-container').children();
var selfHeight = this.clientHeight;
var parentOffset = this.parentElement.offsetHeight;
var selfOffset = this.nextElementSibling.offsetHeight;
console.dir(children);
console.log(parentOffset);
$('.speaker-container').removeClass('open').css({'height' : selfHeight + 'px'});
for (var i = 0; i < children.length; i++) {
if (children[i].className == 'speaker-info fade') {
console.dir(children[i]);
$(children[i]).removeClass('fade');
}
}
if (self.parentElement.className !== 'speaker-container open' && self.nextElementSibling.className !== 'speaker-info fade') {
timer = setTimeout(function(){
self.parentElement.setAttribute('class' , 'speaker-container open');
self.parentElement.style.height = selfOffset + selfHeight + 'px';
self.nextElementSibling.style.top = selfHeight + 'px';
self.nextElementSibling.setAttribute('class' , 'speaker-info fade');
// return false;
}, 500);
} else {
$('.speaker-container').removeClass('open').css({'height' : selfHeight + 'px'});
self.nextElementSibling.setAttribute('class' , 'speaker-info');
window.clearTimeout(timer);
}
});

Make a class that has the item open. (let's say the class is "open")
Make a class that has the item closed. (let's say the class is closed")
let's say all the accordion items are in the accordion class.
function that opens an item:
cycle through and remove any existing open item classes, add closed class.
add open class to the selected item.
by default, give closed class to all items (except the one you want open by default, if any)
with javascript it would look something like:
function openOnClick()
{
var openaccordion=document.getElementsByClassName('open');
openaccordion.className.replace( /(?:^|\s)open(?!\S)/g , 'close' );
this.className.replace( /(?:^|\s)close(?!\S)/g , 'open' );
}
with jQuery it would look like this:
$('div.accordion').click(function(){
$('.open').removeClass('open').addClass('close');
$(this).removeClass('close').addClass('open');
}
you can use jqueryui to get some sliding effects in there pretty simply too:
$(this).switchClass('close','open',1000);