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>
Related
I am trying to trigger the visibility of a DIV via a button.
My code looks like this:
function myFunction() {
var moreText = document.getElementById("csrmore");
var x = document.getElementById("myDIV");
let ishidden = x.classList.contains("hidden")
if (ishidden == true) {
x.classList.remove("hidden");
x.classList.add("shown");
moreText.innerHTML = "Show less";
}
else {
x.classList.remove("shown");
x.classList.add("hidden");
moreText.innerHTML = "Show more";
}
}
div {
width: 100px;
height: 100px;
}
.hidden {
display:none
}
.shown {
display:block;
}
<button id="csrmore" onclick="myFunction()">
Show more
</button>
<div id="myDIV" class="hidden">
This is the triggerable content.
</div>
Fiddle: https://jsfiddle.net/6zxa0Lg2/
It works fine, however since I am a JS starter, I was wondering if this is bad practice or is it a totally fine piece of code?
Thanks for every help :)
Here's another way to go about it. Make it all relative. The button is clicked and the javascript finds the content associated to that button to show/hide. This way you don't need any ID tags and you can have as many show/hide buttons as you want on the page.
document.addEventListener('DOMContentLoaded', () => {
// after the page loads...
document.querySelectorAll('.csrmore').forEach(button => {
// find all the 'show more' buttons and for each one...
button.addEventListener('click', e => {
// when someone clicks this button
let content = e.target.closest('.container').querySelector('.content');
// find the content div associated with this button
content.classList.toggle('hidden');
// toggle on or off the content
e.target.innerText = content.classList.contains('hidden') ? 'Show more' : 'Hide';
// change the text of the button
})
})
})
div {
width: 100px;
height: 100px;
}
.hidden {
display: none
}
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
<hr>
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
This is a fine way to do this! This is not the solution I would not have come up with, but it is actually pretty clever. I would have thought to have done it by toggling TARGET.style.visibility to either "hidden" or "visible" when clicking the button. Again though, your code looks perfectly fine!
Is there a way to hide a button with .innerHTML?
I tried the following code but it did not work:
function F1() {
bL1 = document.getElementById("bL1").innerHTML = '<body class="hidden">';
ebL1 = document.getElementById("ebL1").innerHTML = '</body>';
}
.hidden {
display: none;
}
<button onclick="F1()">Hide Lw</button>
<label id="bL1"></label>
<button> Lw </button>
<label id="ebL1"></label>
If you are trying in this method you are doing very wrong but use the following code that should work correctly to hide a button or anything you want to hide.
function F1() {
bL1 = document.getElementById("bL1").style.display = 'none';
}
<button onclick="F1()">Hide Lw</button>
<button id="bL1"> Lw </button>
This is a very easy and short method to apply CSS inside JavaScript.
Can some one tell me, Why tag a make my first click without opening the table, but take the address which should go (in first moment table is hidden)
and after second click, table is opening and i'm going to it. without tag <a href="#team-#team.Id"> it open by 1 click. #team-**#team.Id** - it's normal, i did 15 tables by cycle, and make for each table id)
my code in view
<div id=team-logo-wrapper>
<ul>
#foreach (Team team in Model.Item2)
{
<li>
<div class="team-section-box">
<p class="team-name">#team.Name</p>
<a href="#team-#team.Id">
<img src="#Url.Content(string.Format("~/Images/NBAlogoImg/{0}", team.Path))" class="logo-images" alt="Логотип #team.Name" title="Логотип #team.Name" onclick="ShowTable(#team.Id)" />
</a>
</div>
</li>
}
</ul>
in CSS my display and visibility
.table-hidden {
margin-top: 50px;
display: none;
visibility: hidden;
}
the simplest script
var flag = true;
function ShowTable(teamId) {
var id = "team-" + teamId;
var getElem = document.getElementById(id);
if (flag) {
flag = false;
getElem.style.display = 'none';
getElem.style.visibility = 'hidden';
}
else {
flag = true;
getElem.style.display = 'block';
getElem.style.visibility = 'visible';
}
}
When you click on the image, you also activate the link.
If you really need the link, then change it to something like:
<a href="javascript: void(0)">
<img src="#Url.Content(string.Format("~/Images/NBAlogoImg/{0}", team.Path))"
class="logo-images" alt="Логотип #team.Name"
title="Логотип #team.Name"
onclick="ShowTable(#team.Id)" />
</a>
Onclick button "button1" , we are displaying pop up box and hiding "button1".
but now we want to display the "button1" once we click on "close" button of "pop up box"
pop up close button code
<a href="javascript:void(0)" class="close">
<input type="button" onclick="showDiv()" style="display:none;" />
</a>
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
}
button1 code
<div id="aitcg-control-panel"><button>button1</button></div>
Edit
I tried this code : document.getElementById('aitcg-control-panel').style.display = "block"; but still it didt worked for me....
After looking into your website you've provided i found out that the elements you wanted to reappear were removed from the page.
Why don't you just keep the button instead? Because after saving the item it refreshes the page anyway.
There should be any javascript code in the module (aitcg) you've installed on your site that removes the elements aitcg-toolbox-{{somenumber}} and aitcg-control-pane from the page.
I hope this could be of any help.
Is this what you were looking for? I'm sure there is a cleaner way to do it, but your question wasn't super clear.
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
document.getElementById('ShowDivButton').style.display = "none";
}
function hideDiv() {
document.getElementById('aitcg-control-panel').style.display = "none";
document.getElementById('ShowDivButton').style.display = "initial";
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
<button id='ShowDivButton' onclick="showDiv()">Open Div</button>
<div id="aitcg-control-panel" >
<button id='ShowDivButton' onclick="hideDiv()">Close Div</button>
</div>
I've sincerely not fully understood your question. But from what you've said, I'm assuming this is what you want:
function display(a) {
//Hide the button
a.style.display = "none";
//You need setTimeout for the code to wait for the alert to show the button again
setTimeout(function() {
alert('ok');
a.style.display = "block";
}, 100);
}
<button onclick="display(this);">Click me</button>
Hope it helps in some way and if this is not what you wanted, please reply.
after giving link for you website. i can tell you the reason why its not working for you.
on click of save design you are removing code for aitcg-control-panel
that's why you are not able to show it back
proof: before clicking code for button div exists
After click on save design
proof:
code is not there. that's why you are not able to show.
i debugged your code i found one function
_getControlPanelHtml: function()
{
if (this.config.editorEnabled) {
var returnHtml = "";
returnHtml += '<div id="aitcg-control-panel" style="display:none">' +
'<button onclick="return setproductlogin(\'null\', event);" class="aitcg-button apply-but" id="submit-editorApply-{{rand}}" title="{{apply_text}}">{{apply_text}}</button>' +
'<button class="aitcg-button reset-but" id="submit-editorReset-{{rand}}" title="{{reset_text}}">{{reset_text}}</button>' +
'</div>';
return returnHtml;
}
return '';
},
in this function they are returning '';
please change this function or other function to give you the same code what you had before clicking.
How can I show an hidden div when using anchors that are linked with their linked a tag that is in the hidden div. If you know what I mean..
See the fiddle: http://jsfiddle.net/2sjdeucf/
I mean when visiting the url site.com/#1 Then I want the div shown, so the same like when you press on the button named 1.
Html
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target=".1"><button>1</button></a>
<a class="click" id="showDataInput" data-target=".2"><button>2</button></a>
<a class="click" id="showHistory" data-target=".3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
Javascript
var $targets = $('.target');
$('#clicks .click').click(function () {
var $target = $($(this).data('target')).toggle();
$targets.not($target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none':'')
});
Thank you
You need get initial hash and subscribe for hash changes via onhashchange, so your code becomes (I slightly modified your code, final version is, tested locally in Chrome):
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = $(this).data('target');
doToggle(num);
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
You can use window.location.hash to detect the values after the hash.
exp:
var val=window.location.hash.substring(1);//substring to remove the #
if(val.length!==0){
$(".target").hide();
$("."+val).show();
}
I'm not sure to understand well but I tried to stick to your instruction within your .text div, so this code shoud do the trick :
function showHideDiv() {
$('.target').each(function(){
if($(this).is(':visible')){
$('#text').hide();
}
});
}
$(document).on('load', showHideDiv);
$('.click').on('click', showHideDiv);
$('#clicks .click').click(function () {
$('div.target' + $(this).data('target')).toggle();
$('#text').css('display', $('div.target:visible').length ? 'none':'')
});
Working JSFiddle
You can use :target pseudoclass and hash based links (browser support)
div {
display: none;
}
div:target {
display: block;
}
jsfiddle