I tried this but obv it didnt work. Im very new to JS, how do I do this?
function test() {
if(document.getElementById('div1').style.display = 'block'){
document.getElementById('div1').style.display = 'none';
}
if(document.getElementById('div1').style.display = 'none'){
document.getElementById('div1').style.display = 'block';
}
}
The code you have (once corrected) will toggle visibility but won't make an element invisible on the 2nd time a user clicks on it.
I've set up a JSFiddle here that uses plain JavaScript in order to do what you're asking in the title of the question.
Let's assume that your HTML looks something like this, with a DIV that has a class name of "tester":
<div class="tester">This is a triumph.</div>
<p>I'm writing a note here; huge success</p>
One way of achieving this is to add a data element to the DIV to track the number of clicks and then, when the number of clicks hits two, we hide it. The code for that looks like this:
document.getElementsByClassName("tester")[0].onclick = function(targ) {
if(!targ.target.hasAttribute("data-click")) {
targ.target.setAttribute("data-click",0);
}
var currClicks = +targ.target.getAttribute("data-click");
if(currClicks==2){
targ.target.style.display = "none";
} else {
targ.target.setAttribute("data-click", currClicks+1);
}
};
Again, this will get you the functionality you asked about in your question but does not match your code sample as it doesn't really do what you want. If you need any more information on this feel free to ask, but I think this will get you what you're looking for.
It shouldn't be =, it should be == in JavaScript if condition and twice if condition always setting style.display = 'block', so either use else if or simply else.
<div id="div1" style="display:block"></div>
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else if(document.getElementById('div1').style.display == 'none') {
document.getElementById('div1').style.display = 'block';
}
}
or
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else{
document.getElementById('div1').style.display = 'block';
}
}
Related
I have an addEventListener for a dropdown menu and when I click it for the first time the menu appears, and if I click again it disappears correctly. However, after that if I try again nothing happens. If I get rid of the if statements and use a simple alert inside the function it works every time, but this if statement seems to be troublesome.
document.getElementById("menu").addEventListener("click",navigation);
function navigation() {
var navMenu = document.getElementById("navigation");
var list = document.getElementById("list");
if (navMenu.style.height == 0) {
navMenu.style.height = "190px";
list.style.display = "flex";
}
else {
navMenu.style.height = "0";
list.style.display = "none";
}
}
The element height is reported in pixels so updating the code like this should work.
if (navMenu.style.height === '0px') {
Here is a codepen http://codepen.io/anon/pen/ZOXAzd
In the condition, change
if (navMenu.style.height == 0)
to
if (navMenu.style.height == '0px')
and it should work.
I am not sure about this but have you tried to do = 0 instead of = '0'?
I hope this helped, good luck.
I have a small bit of javascript for showing and hiding a div.
function hidefooter(){
var button = document.getElementById('footerbutton');
button.onclick = function() {
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
}
The div starts {display:none;}. I looked around online and could only find people saying it was an html thing. My problem with that was that when i first wrote it the "block" and "none" values were switched and it took 3 clicks to work. Any help would be great.
update: A better explanation. This code does exactly what i want but you have to click twice to get the effect to work. At first i had the "block" and "none" properties switched and it took 3 clicks to get it to work. The footer starts out {display:none;}. I put it up online so a friend could take a look at it. the url is http://www.miettegoesplaces.com. click on the purple foot button on the right.
update 2: sorted the problem was i was calling the onClick twice. this is the simplified working version.
function hideFooter(){
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
thanks for everyones comments and advice.
You have added click event twice here.
First, you are calling onClick event on button.
Inside hidefooter() function, you have defined button.onclick = function() {...}
remove button.onclick = function() {} and use like this :
function hidefooter(){
var button = document.getElementById('footerbutton');
var div = document.getElementById('footerbox');
if (div.style.display != 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
Here is the working fiddle.
you need to add "display: none" to your footer's style
You can use window.getComputedStyle(elem) for Firefox, Opera, Safari and Chrome or elem.currentStyle for IE
var button = document.getElementById('footerbutton');
button.onclick = function() {
var div = document.getElementById('footerbox');
var style = window.getComputedStyle(div);
if (style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
Just remove the code that you use to define a button that handles events and add an onClick() event to your button instead
This code will work as you want it
function hidefooter(){
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
But make sure your button code looks like this:
<button id="footerbutton" onClick="hidefooter()">Hide Footer</button>
Pay attention to onClick="hidefooter()"
And make sure your div is still display:none;
I believe the problem was that you're using the 'hide' button to define what it does and THEN do the hiding work. You should add an event handler that calls the hidefooter() function instead which has nothing but the footer hiding code.
Im looking for a simple way to only have one div open at a time. Im using an accordian style vertical navigation and when I click on one, it displays the div below, when I click on another, it does the same. I would like the previous div to hide again when I click on a different nav link.
This is the javascript im using to get it to open and close:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Is there something else I can add that will close the div if another is opened?
A very simple way would be to just keep track of the previously opened element:
(function() { // using an IIFE to prevent polluting the global namespace
var opened_element = null;
window.toggle_visibility = function(id) {
var e = document.getElementById(id);
if (opened_element && opened_element !== e) {
opened_element.style.display = 'none';
}
if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
opened_element = e;
};
}());
Give them all the same class. Hide them all by classname and show the one you clicked on with the id passed.
The best way is to:
Use CSS to hide all of your DIVs
When you want to display one; add a
class to your open div called "active" or whatever
Then apply css to
that class with display: block or what ever.
As Jason said in his comment you can do this with jQuery or you can do it without.
jQuery will provide animation support and easier manipulation of classes.
jQuery Toggle Class
Since you're not using JQuery, I assume you want a Javascript answer, you can do this by giving your divs some unique classname like "menudiv", then appending something like the following to your function:
var menu_divs = document.getElementsByClassName("menudiv");
for ( var i = 0; i < menu_divs.length; i++ ) {
if ( menu_divs[i] != e )
menu_divs[i].style.display = 'none';
}
I have make a hide/show button for my site's header, but I have this "issue". If user load my site for first time, or after refresh, this button needs to click two times for work. But only for the first time. Then it works normally! Any idea why is this happening?
Live example at the comment below. Thank you in advance!!!
The js code is:
function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block')
sheader_1.style.display = 'none',
sheader_2.style.display = 'block';
else sheader_1.style.display = 'block',
sheader_2.style.display = 'none';
;}
if you alert the value of sheader_1 the first time you load the page, result is an empty string, so your code won't do anything (it will jump to the else statement).
One way to make it work would be:
function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
//here we also check if display property is empty
if (sheader_1.style.display == 'block' || sheader_1.style.display == '')
sheader_1.style.display = 'none',
sheader_2.style.display = 'block';
else sheader_1.style.display = 'block',
sheader_2.style.display = 'none';
;}
function display_header(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block' || sheader_1.style.display=='')
{
sheader_1.style.display = 'none';
sheader_2.style.display = 'block';
}
else {
sheader_1.style.display = 'block';
sheader_2.style.display = 'none';
}
}
WORKING FIDDLE DEMO
window.getComputedStyle(sheader_1).display
You need to get the computed style of the element. Else this conditional if (sheader_1.style.display == 'block') won't work because display will be empty.
In Internet Explorer the method for computed style is: element.currentStyle.
I suggest using jQuery in this case.
When the page loads, sheader_1's display is not block, but an empty string.
You can therefore change your condition to:
if (sheader_1.style.display != 'none')
Please help as when ever i clcik and call Javascript function to unhide an element it turn back hidden again. it takes a second or less.
HTML
<asp:Button ID="btnFromCalOpen" Width = "35" runat="server" Text=">" style="display:none; visibility:hidden;" OnClientClick ="ShowCal()" />
Javascript
function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.visibility = "hidden" ) {
alert("Show");
elem.style.visibility = "visible";
elem.style.display = "inline";
}
else {
alert("Hide");
elem.style.visibility = "hidden";
elem.style.display = "none";
}
}
it like when ever i click on the button it refresh its style properties of all elements
Please help
You have an error/bug on your code here
if (elem.visibility = "hidden" ) {
you not check for the if, but you set it hidden !
To avoid this kind of errors try this way / trick
if ("hidden" == elem.visibility ) {
Two major problems in your code.
elem.visibility is not an attribute of your object. If you want to look at the style setting, it would be elem.style.visibility.
A comparison is done with == or ===, not with =. You were doing an assignment operation with =.
Try this code:
function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.style.visibility == "hidden" ) {
alert("Show");
elem.style.visibility = "visible";
elem.style.display = "inline";
}
else {
alert("Hide");
elem.style.visibility = "hidden";
elem.style.display = "none";
}
}
FYI, there's no need to set both style.visibility and style.display. If you're going to set style.display to "none", then the visibility setting isn't needed.
A simpler version of your code would be this (which you can see working here in this jsFiddle):
function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.style.display == "none" ) {
elem.style.display = "inline";
} else {
elem.style.display = "none";
}
}
And, remove the visibility: hidden from the HTML for this tag. The display: none is all you need.
For reference (in case this is a possibility), this is one of those places that libraries like jQuery or YUI are handy. In jQuery this would just be:
function ShowCal() {
$("#MainContent_CalendarFrom").toggle();
}