Develop Reference

toggle show/hide starting from hide/none

I'm working on a website where I want to show and hide images by clicking on a button/word. I used bit of code and it's working:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Similar to the one used in a previous stack overflow question on this topic:
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
However, I want the image to be hidden when you enter or refresh the site instead of shown. So instead of it starting by showing the image and hiding it when you click on the word, I want it to be hidden and shown when you click the word. How do I change the script to make that happen?
I tried to switching the "none" and "block" but it didn't work haha...
Thanks

You can hide the image when the script runs, which is when the page is loaded or refreshed.
So just adding one line is enough.
const button = document.getElementById("button") // Assumes element with id='button'
const imageElement = document.getElementById("newpost")
// Hide the image at the start
imageElement.style.display = "none"
// Toggle it on click
button.addEventListener('click', () => {
imageElement.style.display =
imageElement.style.display === "none" ? "block" : "none"
})
I also modified your code to make it a bit easier to read by using a ternary operator.
And in case you are using the .onClick method from the example: Prefer using addEventListener over .onX methods. More about that on MDN and on this answer.

addEventListener "click" only runs once with if statement

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.

Javascript toggle (one at a time)

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';
}

jqTransform Select - Scroll to letter typed

I've got a form that uses jqTransform to replace the standard select boxes and radio buttons. It all works fine and dandy, except one thing that annoys me:
Since it replaces the select box with a list of links, when you type a letter to scroll it doesn't do anything. For instance, you click to open up the select, then type an S. It should scroll to the first S in the list, but nothing happens. Is there a way to re-instate this functionality? Below is the jqTransform code for the select box. I don't see a handler for this type of thing:
/***************************
Select
***************************/
$.fn.jqTransSelect = function(){
return this.each(function(index){
var $select = $(this);
if($select.hasClass('jqTransformHidden')) {return;}
if($select.attr('multiple')) {return;}
var oLabel = jqTransformGetLabel($select);
/* First thing we do is Wrap it */
var $wrapper = $select
.addClass('jqTransformHidden')
.wrap('<div class="jqTransformSelectWrapper"></div>')
.parent()
.css({zIndex: 10-index})
;
/* Now add the html for the select */
$wrapper.prepend('<div><span></span></div><ul></ul>');
var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
/* Now we add the options */
$('option', this).each(function(i){
var oLi = $('<li>'+ $(this).html() +'</li>');
$ul.append(oLi);
});
/* Add click handler to the a */
$ul.find('a').click(function(){
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the default */
$('a:eq('+ this.selectedIndex +')', $ul).click();
$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
this.oLabel = oLabel;
/* Apply the click handler to the Open */
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.click(function(){
//Check if box is already open to still allow toggle, but close all other selects
if( $ul.css('display') == 'none' ) {jqTransformHideSelect();}
if($select.attr('disabled')){return false;}
$ul.slideToggle('fast', function(){
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({scrollTop: offSet});
});
return false;
})
;
// Set the new width
var iSelectWidth = $select.outerWidth();
var oSpan = $('span:first',$wrapper);
var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
$wrapper.css('width',newWidth);
$ul.css('width',newWidth-2);
oSpan.css({width:iSelectWidth});
$ul.css({height:'420px','overflow':'hidden'});
// Calculate the height if necessary, less elements that the default height
//show the ul to calculate the block, if ul is not displayed li height value is 0
$ul.css({display:'block',visibility:'hidden'});
var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
(iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
$ul.css({display:'none',visibility:'visible'});
});
};
Here is what we tried to do to implement this:
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.keypress(function (e) {
$.each(myArray, function (i, l) {
var sc = l.substr(0, 1).toLowerCase();
var kc = String.fromCharCode(e.which);
if (sc == kc) {
$select[0].selectedIndex = i;
$('span:eq(0)', $wrapper).html(l);
$ul.hide();
return false;
}
});
});

Oh dang. I was missing the big picture without the code. Now I see what's going on... yeah, there's no "reinstating" the functionality since the new list of links is not actually a select box anymore. If jqTransform doesn't include a scrollable option by default I think you'll have to implement one.
If you look at their demo page, their "plain" select box works as expected (although it's hard to notice since all options start with "O", it WILL jump to the first "Option") and their styled select box does not.
Without looking deeper at the code, I suspect that means that a keypress capture is not implemented in the plug-in itself.
I'm afraid this isn't the "answer" you were probably hoping for. With any luck someone who has done this sort of thing before will hear your plea. ;-)

solution for jqTransform select keypress work link visit http://www.techapparatus.com/jqtransform-select-problem-with-keyboard-type-solution

Add the following code at the end of return this.each(function(index){ ... }); that is inside of $.fn.jqTransSelect function.
Also you have to install the scrollTo jquery plugin.
CODE:
var newChar;
$(document).bind("keydown", function (e) {
var char = String.fromCharCode(e.which);
var code = e.keyCode || e.which;
var charFound;
if( $ul.css('display') != 'none' ){
if (newChar != char){
newChar = char;
$ul.find('a').each(function(){
// Find first occurence of li that starts with letter typed
if ($(this).text().substr(0,1).toUpperCase() == char && $(this).text() != "Choose"){
charFound = true;
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
$select[0].selectedIndex = $(this).attr('index');
$($select[0]).trigger('change');
$that = $(this);
return false;
}
});
if (charFound == true){
// Scroll to selected value
$ul.scrollTo($('a.selected', $ul), 400);
}
}
//If Enter has been pressed, select the value
if(code == 13) {
$('span:eq(0)', $wrapper).html($that.html());
$ul.hide();
return false;
}
}
});

Javascript toggle issue

This is my script :
window.onload = function (){
var title = document.getElementsByTagName('h1')[0].id = "heading1";
document.getElementById(title).onclick = function (e){
var para = this.nextSibling.style.display = 'block';
var newVal = (para == "block") ? "none" : "block";
alert(newVal);
}
}
The result I need is for the alert value to toggle from block to none and back. But I am always getting "none". What is the problem with my code?

window.onload = function () {
var firstH1 = document.getElementsByTagName('h1')[0];
firstH1.id = "heading1";
firstH1.onclick = function() {
var currentValue = this.nextSibling.style.display;
this.nextSibling.style.display = (currentValue == "none") ? "block" : "none";
}
}
Note a few things: I simplified your element fetching because it doesn't make sense to fetch an element, assign it an id, then use that id to find that same element again.
I also switched block/none ordering, because if no style is displayed then it would be blank -- and your first click would assign block to it - and it would not disappear. This way it does.

Well, para will always be "block", and therefore newVal will always be "none". So that behavior is expected. What are you trying to do? you are not toggling the property with your curent code.