I have this js function:
var iframeShowing = false;
async function show() {
var iframe1 = document.getElementById('help-popup');
iframe1.style.display = iframeShowing ? 'flex' : 'none';
iframeShowing = !iframeShowing;
}
The problem is that I need to click 2 times to actually show the iframe and make it work properly. After I click 2 times, it works properly(every click shows and hides the iframe). Try it on the website and you'll understand. This is the html code:
<i class="fas fa-question-circle" id="questionmark" onclick="show();" >
This is the current website: https://personal-website.krix12.repl.co/ The above mentioned function is called when the blurple question icon is clicked. How can I make it work on the first click?
You can just use DOMTokenList.toggle() to toggle between flex and none:
function toggle() {
var iframe1 = document.getElementById('help-popup');
iframe1.classList.toggle('hide');
}iframe {
display: flex;
}
.hide {
display: none;
}<div><i class="fas fa-question-circle" id="questionmark" onclick="toggle();">?</i></div>
<iframe id="help-popup" class="hide"></iframe>