Div visibility toggle not working - javascript

I'm making a tree structure using html and css.
This is the final structure that I should reach: http://jsfiddle.net/yrE7N/1/
What I need is, on clicking a node, its children node will appear.
I've done this till now:
JS Fiddle: http://jsfiddle.net/ZTkLg/11/
I've used this JS function
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
The thing is, the JS function doesn't seem to be toggling the visibility of the div stage-two.
I've used this function before on this page: http://leonardorestaurant.in/menu and it worked but I can't figure the problem out in this case.

Try
Some text here
and
var flag = true;
function showdiv(id) {
var div = document.getElementById(id);
div.style.display = flag ? 'none' : 'block';
flag = !flag;
}
Demo: Fiddle

The console in my browser prints out :
Uncaught TypeError: Cannot read property 'style' of null
Which means that here :
div.style.display = 'block';
div is not the result you think it should be... That tells us that id is not what we think here :
var div = document.getElementById(id);
Which I confirmed by using :
console.log(id);
inside your function.
The id value is actually the <div id="two">
So, basically you already have the element you're looking for.
However, you've got bigger problems, which is that you need a toggle function, I'm just guessing. Try using this :
function toggleDiv(id) {
var el = document.getElementById(id);
var newDisplayValue = "none";
if ( el.style.display && el.style.display === "none" ) {
newDisplayValue = "block";
}
el.style.display = newDisplayValue;
}
and change to this :
<a href=# onclick="toggleDiv('two');">
see it here

Related

I want to set a variable equal to the index of the clicked item in an array

I am very new to JS and just learning how it works. I have 12 divs and inside of them each is an div.image that takes up the whole div and then a div.info and div.date. I am trying to set it up so that when I click on a div, the info and date will show up and when I click again they disappear. I know this can be done easier with CSS but I wanted to do it with JS.
Currently the function only works for the first div.info and div.date because I can preset the functions as seen below. I was wondering if there was a way to get the index of the div that I clicked on. Then instead of creating a function for every individual div I can set it to the clicked index.
Here is the javascript code:
<script>
const panels = document.querySelectorAll('.panel');
console.log(panels);
const info = document.querySelectorAll('div.info');
console.log(info);
const date = document.querySelectorAll('div.date');
console.log(date);
function addInfo(){
document.panels.addEventListener('click', index())
if(info[0].style.display === 'none'){
info[0].style.display = 'block'
} else{
info[0].style.display = 'none'}
};
function addDate(){
if(date[0].style.display === 'none'){
date[0].style.display = 'block'
} else {
date[0].style.display = 'none'
}
};
document.getElementById("panel1").addEventListener("click", addInfo);
document.getElementById("panel1").addEventListener("click", addDate);
</script>
Edited:
You could get the the element from the click event, and you can reuse this listener for all the elements.
function addDate(e){
const date = e.target
if(date.style.display === 'none'){
date.style.display = 'block'
} else {
date.style.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

Hide element if other class exist

i know how to do it with jquery, but how with clean javascript? Any help how to do this?
Here is my code
var element = document.getElementsByTagName('tagone')[0];
if(element !== null){
document.getElementByClassName('classsix')[0].style.display = 'none';
}
You can use the hidden DOM attribute or create a new class called hide and use the logic accordingly.
var element = document.querySelector('tagone'); // returns only first match
if(element) {
document.querySelector('.classsix').setAttribute('hidden',true);
}
or you can create the class in css .hide { display: none; } and use document.querySelector('.classsix').classList.add('hide');
your code is right.
you can use like this also
var element = document.getElementsByTagName('tagone')[0];
var element1= document.getElementsByClassName('classsix')[0];
if(element && element1){
element.style.display = 'none';
}
I tried this and it's working.
if (document.getElementsByTagName('tagone')[0] != null) {
document.getElementsByTagName('classix')[0].style.display = 'none';
}
The javascript function is getElementsByClassName you missed 's'
function hide(){
var y = document.getElementsByClassName("x");
y[0].style.display = 'none'
}
Here is the jsfiddle link.

Code explanation js

Wondering if someone can explain what this code means. What do the different lines mean and do?
function overlay(theTitle) {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
el.innerHTML = theTitle;
}
function vindu(){
el=document.getElementById("vindu");
el.style.visibility=(el.style.visibility=="visible")?"hidden":"visible";
}
The only piece of this code that shouldn't be fairly self-explanatory is called the conditional operator (also called ternary).
For an example of how this works, val = test ? 'foo' : 'bar' is equivalent to the following:
if (test) {
val = 'foo';
} else {
val = 'bar';
}
el = document.getElementById("overlay");
searches an element in your html markup with the ID=overlay
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
sets the visibility style of the object to visible if it was hidden before and vice versa.
el.innerHTML = theTitle;
sets the innerHTML property to the variable which got passed in to the function. innerHTML is actually the content of the element and will show as text in your site
the other method does exactly the same for the element ID = vindu

div won't display on click of an image

No idea where the problem lies, tried various things and I'm not having any luck. I've done this successfully before in the past but now it won't work, any help would be great...
HTML snippet:
<tr>
<td class="tableContent noBorderSides paddingAll"><img class="imgResize" src="images/emptyCircle.png" onclick="expandItem()"/>
<div id="Expand" class="hiddenDiv">
HELLO?
</div>
JavaScript:
function expandItem() {
if (document.getElementById("Expand").style.display == 'block') {
document.getElementById("Expand").style.display = 'none';
}
else if (document.getElementById("Expand").style.display == 'none') {
document.getElementById("Expand").style.display = 'block';
}
}
CSS:
.hiddenDiv {
display: none;
}
What am I doing wrong?
The initial display that is set in your CSS won't be reachable from the .style property.
Do it like this:
function expandItem() {
var expand = document.getElementById("Expand");
if (expand.style.display == '') {
expand.style.display = 'block';
}
else if (expand.style.display == 'block') {
expand.style.display = '';
}
}
Or a little shorter like this:
function expandItem() {
var expand = document.getElementById("Expand");
expand.style.display = (expand.style.display == '') ? 'none' : '';
}
Use .getComputedStyle() to get any style attributes associated with a given element. Notice, that the object returned is read only, so you'll want to use this for the initial if statement, and then set the style as you were doing above.
You could just remove the class from the element that defines the hidden property and add when you want to hide:
if (document.getElementById("Expand").className == '') {
document.getElementById("Expand").className = 'hiddenDiv';
}
else if (document.getElementById("Expand").className == 'hiddenDiv') {
document.getElementById("Expand").className = '';
}
Do note that if you have other classes on that element you will need to do a little string manip rather than just a straight check and remove.
//Temporary solution
//Replace your javascript code with following code
if (document.getElementById("Expand").style.display == 'block') {
document.getElementById("Expand").style.display = 'none';
}
else{
document.getElementById("Expand").style.display = 'block';
}
//Note :- Javascript detect '' (empty) when it try to search display property for expand block
#user1689607's answer is right if you need to just use javascript. If you have access to jQuery you can do it like so
$("#Expand").toggle();
And a simple jsfiddle to demonstrate: http://jsfiddle.net/P36YA/

Categories