Making one div visible at a time - javascript

I'm trying to make when some presses a button that only one div is visible at a time. So when they click another button, that corresponding div pops up and the last one hides.
I've tried a for loop:
function display(x) {
for (i=0; i<content.length; i++){
content[i].style.display = 'none';
}
if(x = content[i]){
x.style.display = 'inline';
}
}
This didn't do anything.
I tried nesting the if statement inside the loop, but it caused all to be visible.
I've linked the jsfiddle below.
Please no jQuery answers as I'm trying to learn pure javascript first.
Thanks in advance.
https://jsfiddle.net/ethacker/rp59g9cf/

You are not putting the if inside the loop. Therefore, it will only check the last value of i. Also, the equals should be ==. You should do it like this:
function display(x) {
for (i=0; i<content.length; i++){
if(x == content[i]){
x.style.display = 'inline';
} else {
content[i].style.display = 'none';
}
}
}

see this fiddle example code I slightly modified your code
var currDisplayElm;
//function
function display(content) {
if(currDisplayElm)
currDisplayElm.style.display = 'none';
currDisplayElm = content;
content.style.display = 'inline';
}

As I understand.
Ithink If you call function on click of button then set div Id in sequence and you should pass thet div no which you want to display.
And div name must be same then you can hide other div.
I hope you understand ..

Related

Why does my script only act on the first element with a particular ID value?

I have a query that produces a number of DIV id="toggle_panel" I know I can effectively change the ID of the DIV dynamically.
Below is the script, straight from w3schools, which works great out of the box...for the first DIV and first DIV only. How do I apply a dynamic variable from the query to my script?
Second question: How do I get it so the DIV are hidden by default?
function myFunction() {
var x = document.getElementById("toggle_panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Thank you
For your first question, using a class would be more appropriate to tag a collection similar html elements.
So your divs should look something like this:
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
You could then use document.getElementsByClassName('toggle_panel') to access them.
Also to hide them by default, you could use css to target your classes as shown below.
.toggle_panel {
display: none;
}
As mentioned in the comments, you can only have one instance of an ID. To achieve the result you want you will have to change the <div id="toggle_panel">content</div> to <div class="toggle_panel">content</div>. Then use the following javascript:
function myFunction() {
var panels = document.getElementsByClassName("toggle_panel");
for(var i = 0; i < panels.length; i++) {
var panel = panels[i];
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
}
}
I think you should use querySelectorAll('toggle_panel') and your code will be like this:
Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
element.display = 'none'
})

make div appear when var is bigger than 14. otherwise keep it hidden

<script>var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
div.style.visibility='visible';
}
else {
div.style.display = 'none';
div.style.visibility='hidden';
}</script>
when using this script the div stays hidden and doesnt become bigger. Anyone know what i can do to make the div appear when var 'totaal' is bigger than 14?
Thanks
Edit1: var totaal is already set earlier in the script. Its a large script with adding and subtracting 1 from 'totaal'. That part isn't neccesary so I didn't include it.
You can use function to toggle your div based on the value of totaal :
function toggleDiv(totaal) {
var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
Now, all the time you change tootal, you can call this function with totaal as parameter to toggle the div

Close a Div element if you click outside of it

I need a function that hide the div if i click outside of the div area ?
I have defined a Div on Position: none, which I make visible by using the following function:
My Div:
<div id="TopBarBoxInfo1" onclick="showSerachOptions('BoxBox');" >
</div>
My function:
function showSerachOptions(element){
var element = document.getElementById(element);
// And then it will change what it is
if(element.id == 'Box'){
if(element.style.display == 'none'){
element.style.display = 'block';
}
else{
element.style.display = 'none';
}
}
}
Now I would need a function, which allows to close the div if you click with the mouse pointer outside of the area of the div. Please describe your solution in detail, because I am a beginner!
Since being registered doesn't mean knowing the rules i'm going to answer your question BUT you should always ask in english.
var body = document.getElementsByTagName('body')[0];
body.click = function(e){
//here you can get e.target as the click-target-element or
// e.srcElement(Microsoft) as the click-target-element
//than you can handle what you want to do since e.target/srcElement will give you
// an element (just like document.getElementById
}
remember the .click may not be the best way - addEventListener would be much better afaik

JavaScript - Toggle function

Im trying to hide/show a JS function I have defined in a chrome extension.
What I have so far:
The span classes I am trying to hide are label:
dspan.className = "cExtension";
//Create toggle button:
function createToggleButton(){
var toggleButton = document.createElement("button");
toggleButton.innerHTML = "Toggle Overlay";
toggleButton.id = "Toggle"
var header = document.getElementById("header");
header.appendChild(toggleButton);
toggleExtension();
}
// find all spans and toggle display:
function toggleExtension(){
var spans = document.getElementsByTagName('span');
var toggle = function() {
for (var i = 0, l = spans.length; i < l; i++) {
if (spans[i].getAttribute('class') == 'cExtension')
if (spans[i].style.display == 'none') spans[i].style.display = '';
else spans[i].style.display = 'none';
}
}
document.getElementById('Toggle').onclick = toggle;
}
The button shows on the header, however it is unclickable. If I change document.getElementById('Toggle').onclick = toggle; to document.getElementById('Toggle').onclick = alert{"Hello"); the alert is triggered on page load on not onclick. I am trying to get this done in pure JS. Where am I going wrong?
First of all, document.getElementById("Toggle").onclick = alert("Hello"); will set the onclick event to whatever the alert function returns, not the alert function itself. So the alert function happens at page load so it can figure out what to return. So you could do this: document.getElementById("Toggle").onclick = function(){alert("Hello");}; and that might work.
Edit: Scratch everything that was here: I missed that toggle variable set to a function in toggleExtension.
I haven't tested all this so I can't guarantee that it'll all work in your specific case.
if visible is set remove it, otherwise add it
div.classList.toggle("visible");
add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
Make sure browser support: http://caniuse.com/#feat=classlist
Why not use jQuery?
It will do all hard job for you.
http://api.jquery.com/toggle/
Cheers!

JavaScript problem with ID name

I'm using the below code to hide and show divs
function showSubCat(id)
{ for(var i=1; i<=12; i++)
{ var hideid = 'cat'+i;
document.getElementById(hideid).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
The IDs of the div are from cat1 to cat12.
All works good, except for cat11 and cat12, they just dont show.
Any ideas?
SOLVED: Function works, the problem was in the ending tag.
Thaks.
http://jsfiddle.net/samccone/wRWeK/
works fine....

Categories