How can I implement jQuery functionality to toggle the hidden class on an inner div by clicking a button inside a card?
I attempted to create a container div containing multiple cards. The issue arises when I click the button - it only opens the panel, but does not close it when clicked again. However, it closes if I open a new panel, which is the desired behavior.
Another issue I encountered is that the functions hideAllPanels and showMoreInfo only work when one is active.
function handleMoreInfo() {
$(".coin-card").on("click",async function(e) {
e.stopImmediatePropagation();
const coinID = ($(this).find('.coin-name').text()).toLowerCase();
const data = await fetchMoreInfo(coinID);
if (data) showMoreInfo(data,$(this));
});
}
const showMoreInfo = (data,thatCoin) => {
nodeList[0].forEach(div => {
const coinNameFromArr = $(div).find('.coin-name').text();
if (coinNameFromArr.toLowerCase() === data.id ) {
const panel = $(div).find('.more-info-panel').attr("class");
const panelClassesArr = panel.split(' ');
if(panelClassesArr.length === 1) $(div).find('.more-info-panel').addClass("hidden");
if(panelClassesArr.length === 2) $(div).find('.more-info-panel').removeClass("hidden");
}
})
thatCoin.find('.more-info-image').prop("src",data?.image?.large);
thatCoin.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
thatCoin.find('.eur').text(`EUR: €${data?.market_data?.current_price?.eur}`);
thatCoin.find('.ils').text(`ILS: ₪${data?.market_data?.current_price?.ils}`);
}
const hideAllPanels = () => {
nodeList[0].forEach(div => {
const panel = $(div).find('.more-info-panel').attr("class");
const panelClassesArr = panel.split(' ');
if(panelClassesArr.length === 1) $(div).find('.more-info-panel').addClass("hidden");
});
}
This is an example HTML for a card:
<div class="coin-card">
<div class="headInfo">
<p class="coin-symbol">btc</p>
<div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox" role="switch" onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
</div>
<p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" onclick="handleMoreInfo()" data-toggle="collapse" data-target="info" num="0">More Info</button>
<div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image" src="./src/img/bitcoin-g80ff29158_640.jpg">
<p class="info-title">Coin Prices:</p>
<p class="usd">USD: $30</p>
<p class="eur">EUR: €30</p>
<p class="ils">ILS: ₪30</p>
</div>
</div>