Develop Reference

Open and close different divs through clicking menu

I’m having trouble with my JavaScript regarding turning visibility on and off between divs.
I have two columns; on the left is a menu and on the right is the space where I would like to display different divs. My intention is that:
When you click on a menu item, the relevant div appears on the right.
(i.e. display: block)
When you click again on the same menu item, the
relevant div closes (i.e. display: none)
When you click on a menu
item, the relevant div opens, AND all other open divs close.
I've got it working nearly as I want it, though the current issue is that opening a div requires clicking twice. Also, as I am a complete novice at javascript, I imagine my code is MUCH more cumbersome than it needs to be. I’ve looked through similar examples but I can’t quite find the answer. Any help would be much appreciated!
function switchVisible() {
if (document.getElementById('hidden1')) {
if (document.getElementById('hidden1').style.display == 'none') {
document.getElementById('hidden1').style.display = 'block';
document.getElementById('hidden2').style.display = 'none';
document.getElementById('hidden3').style.display = 'none';
}
else {
document.getElementById('hidden1').style.display = 'none';
}
}
}
function switchVisible2() {
if (document.getElementById('hidden2')) {
if (document.getElementById('hidden2').style.display == 'none') {
document.getElementById('hidden2').style.display = 'block';
document.getElementById('hidden1').style.display = 'none';
document.getElementById('hidden3').style.display = 'none';
}
else {
document.getElementById('hidden2').style.display = 'none';
}
}
}
function switchVisible3() {
if (document.getElementById('hidden3')) {
if (document.getElementById('hidden3').style.display == 'none') {
document.getElementById('hidden3').style.display = 'block';
document.getElementById('hidden1').style.display = 'none';
document.getElementById('hidden2').style.display = 'none';
}
else {
document.getElementById('hidden3').style.display = 'none';
}
}
}
<div class="leftcolumn">
<div class="leftmenu">
<div class="subheader" onclick="switchVisible()">Content 1</div>
<div class="subheader" onclick="switchVisible2()">Content 2</div>
<div class="subheader" onclick="switchVisible3()">Content 3</div>
</div>
</div>
<div class="rightcolumn">
<div id="hidden1">
Content 1
</div>
<div id="hidden2">
Content 2
</div>
<div id="hidden3">
Content 3
</div>
</div>

You can add similar classes to the elements to use them as reference. Then toggle one class in the matching clicked container:
function switchVisible(el) {
var classN = el.classList.value.split(' ')[1];
if(classN == 'c1'){
document.querySelector('.rightcolumn .c1').classList.toggle('hideContent');
}
else if(classN == 'c2'){
document.querySelector('.rightcolumn .c2').classList.toggle('hideContent');
}
else if(classN == 'c3'){
document.querySelector('.rightcolumn .c3').classList.toggle('hideContent');
}
var arrayOfElements = document.querySelectorAll('.rightcolumn div').forEach(function(div,i){
if(!div.classList.value.includes(classN) && !div.classList.value.includes('hideContent')){
div.classList.toggle('hideContent');
}
});
}
.rightcolumn div {
font-size:20px;
color: green;
}
.hideContent{
display:none;
}
<div class="leftcolumn">
<div class="leftmenu">
<div class="subheader c1" onclick="switchVisible(this)">Content 1</div>
<div class="subheader c2" onclick="switchVisible(this)">Content 2</div>
<div class="subheader c3" onclick="switchVisible(this)">Content 3</div>
</div>
</div>
<div class="rightcolumn">
<div id="hidden1" class="c1 hideContent">Content 1</div>
<div id="hidden2" class="c2 hideContent">Content 2</div>
<div id="hidden3" class="c3 hideContent">Content 3</div>
</div>

I would instead of making it invisible just to offset it by a lot then set that value as a global variable then just set it to the CSS position attribute. Remember to make the position relative!

Problems with javascript event handler

I'm hoping this doesn't get marked as "duplicate", because I have reviewed several threads and followed the advice I found. I know I'm missing something simple, and need other eyes on this. I'm a newbie, so please bear with me. I am testing a simple button element that I have a click event handler on, but it is not working. It works inline with "onclick", but I am trying to avoid that. The simple html:
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>
And the javascript:
<script>
document.getElementById("handler").addEventListener("click", display, true);
function display() {
if (document.getElementById("stringText").style.display === "block") {
document.getElementById("stringText").style.display = "none";
} else {
document.getElementById("stringText").style.display = "block";
}
};
</script>
I have the css that initially sets the "stringText" display as "none". I appreciate any assistance.

Probably your problem is related to the execution of that script while the document is being loaded.
Add this condition stringText.style.display === "" to show/hide the elements correctly.
An alternative is using the event DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
document.getElementById("handler").addEventListener("click", display, true);
function display() {
var stringText = document.getElementById("stringText");
if (stringText.style.display === "block" || stringText.style.display === "") {
stringText.style.display = "none";
} else {
stringText.style.display = "block";
}
};
});
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>

Please allow some delay to load the pages using window.onload events
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>
<script>
window.onload = function(){
document.getElementById("handler").addEventListener("click", display, true);
};
function display() {
if (document.getElementById("stringText").style.display === "block") {
document.getElementById("stringText").style.display = "none";
} else {
document.getElementById("stringText").style.display = "block";
}
};
</script>

If you make sure and set the initial display property to block it works fine. As an alternative, you could also try using jQuery, as I have in the snippet.
//with jquery
$(document).ready(function() {
$('#handler').on('click', function() {
$('#stringText').toggleClass('hide');
})
})
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>

How to reverse the hide event of a div onclick

I have a div and a button which i would like to show/hide the div when its clicked:
<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
And this piece of script:
function showDiv() {
document.getElementById('element').style.display = "block";
if( ... )
document.getElementById('element').style.display = "none";
}
The display style of the div is none,so its hidden.The first line of the js script changes that value into block,so the div its displayed now. Now i need something to reverse the first line,in case the button its triggered again.So i thought a conditional statement will do it,but i have no idea how to build it. Something line : "if the display style its block,execute the code between {}"
Any idea?

Edit
function toggleDiv(elementId, button, textOn, textOff) {
var style = document.getElementById(elementId).style;
if( style.display == "none" ) {
style.display = "block";
button.innerHTML = textOn;
} else {
style.display = "none";
button.innerHTML = textOff;
}
}
<button name="info" onclick="toggleDiv('element', this, 'Hide Contact Information', 'Show Contact Information')">Show Contact Information</button>
<div align="center" id="element" style="display: none;">bla</div>
Original Answer
function toggleDiv() {
if( document.getElementById('element').style.display == "none" ) {
document.getElementById('element').style.display = "block";
} else {
document.getElementById('element').style.display = "none";
}
}

Using the browser DOM directly is very annoying and your solution may not work in all browsers. You should use some javascript framework like jQuery, prototype or mootools. In jQuery what you want to do is as simple as this:
$("#element").toggle()
If you insist on using raw javascript you can try this:
function showDiv() {
if( document.getElementById('element').style.display == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}

<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
<script>
function showDiv() {
var div = document.getElementById('element').style.display;
if( div == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}
</script>

Changing HTML code with Javascript show/hide

I have tried a few different things, including a switch statement, appending using JQuery etc. and I can't get this to work with the button. What I am trying to do is change the words in P2 from:
Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to show more information about me.
to:
Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to hide more information about me.
I have to do the same thing with "courses" but I think if I could understand the first one, I could get how to do the second see/hide on my own.
I am so confused now :/
I think it has something to do with span tags, but I honestly am in my first week of HTML and have not learned what are probably really simple procedures for things like this yet. I would appreciate any and all the help I can get to help me figure this out.
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<style>
body
{
background-color:#ADD8E6;
}
#p3
{
display:none;
}
#myImage
{
width:280px;
height:280px;
}
#schedule
{
width: 100%;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language = "javascript" >
function changeImage()
{
var image = document.getElementById('myImage');
if (image.src.match("hrgswitch"))
{
image.src = "hrg.jpg";
}
else
{
image.src = "hrgswitch.jpg";
}
}
function toggle1(obj)
{
if(obj == "me")
{
if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "")
{
document.getElementById("p3").style.display = "block";
}
}
else
{
document.getElementById("p3").style.display = "none";
}
}
else if (obj == "courses")
{
if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "")
{
document.getElementById("schedule").style.display = "block";
}
else
{
document.getElementById("schedule").style.display = "none";
}
}
}
</script>
</head>
<body>
<h1> My Page </h1>
<img id="myImage" onclick="changeImage();" src="hrg.jpg" />
<p title="About Me">
Stuff about me <br>
Here is a link to learn more about HTML!
<br>
<br>
</p>
<p id = "p2">
<br>
<br>
Please push <button id = "me" onclick = "toggle1('me');">this </button> to see more information about me.
<br>
<br>
Please push <button id = "courses" onclick = "toggle1('courses');">this </button> to see my list of courses."
</p>
<p id = "p3" >
More stuff about me...
<br>
</p>
<br>
<table id = "schedule">
<tr>
<td>Course Name</td>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>Programming Paradigms</td>
<td>Tuesday / Thursday</td>
<td>11:00-12:15</td>
</tr>
<tr>
<td>Computer Organization</td>
<td>Tuesday / Thursday</td>
<td>9:30-10:45</td>
</tr>
<tr>
<td>Linear Algebra</td>
<td>Monday/Wednesday/Friday</td>
<td>11:50-12:40</td>
</tr>
<tr>
<td>Combinatorics </td>
<td>Monday/Wednesday/Friday</td>
<td>8:35-9:25</td>
</tr>
</table>
</body>
</html>

You have a Syntax Error in your function toggle1. Remove unwanted braces. Try this:
<script language = "javascript" >
function toggle1(obj)
{
if(obj == "me")
{
if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "")
{
document.getElementById("p3").style.display = "block";
}
else
{
document.getElementById("p3").style.display = "none";
}
}
else if (obj == "courses")
{
if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "")
{
document.getElementById("schedule").style.display = "block";
}
else
{
document.getElementById("schedule").style.display = "none";
}
}
}
</script>
But, if you are using jQuery, toggle is an inbuilt function. this is very simple as(Inline JS - Although Recommended as seperate Script): Remove your toggle1 function and change your two html onclick attributes:
Please push <button id = "me" onclick = "$('#p3').toggle()">this </button> to see more information about me.
Please push <button id = "courses" onclick = "$('#schedule').toggle()">this </button> to see my list of courses.

It may be easier with jQuery, something along these lines...
`<script`>
function showhide() {
$( "#showhide" ).text( "hide" );
}
`</script`>
<p>Please push this to <span id="showhide">show</span> more information about me. </p>
<button onclick="showhide()">Hi</button>

Perform validation on CheckBox check/uncheck in javascript

Here i have one check box if that check box is checked then i want to display one div and if that checkbox is unchecked then i want to hide that div.
Below is my code its not working please help .
<div class="row1" id="homemove"> <span class="label">Home Move</span>
<input type="checkbox" id="homecheck" onclick="HomeMove()" </input>
</div>
function HomeMove() {
if (document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "block";
} else if (!document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "none";
}
}

Replace your Javascript HomeMove function as below
function HomeMove() {
if (document.getElementById("homecheck").checked) {
document.getElementById("NewAddress").style.display = "block";
} else {
document.getElementById("NewAddress").style.display = "none";
}
}

Not sure what document.SalesNew.HomeMove is supposed to be, but you should just create an event handler like so:
<div class="row1" id="homemove">
<span class="label">Home Move</span>
<input type="checkbox" id="homecheck"></input>
</div>
<script type="text/javascript">
document.getElementById('homecheck').onchange = function() {
document.getElementById("NewAddress").style.display = this.checked ? 'block' : 'none';
}
</script>
Also, you don't have an element with the ID NewAddress, but I'm guessing there is one in the actual code you're using.

Or, if you want to keep your own code, you could do it this way:
http://jsbin.com/uludes/1/edit

Try out the following fiddle: http://jsfiddle.net/GtmWX/2/
Simple checkbox to show/hide div
HTML
<p>Check here to show div <input type="checkbox" name="checkbox" id="checkbox" tabindex="165" /></p>
<div id="hiddenDiv"></div>
JS
function setUp() {
document.getElementById("checkbox").onclick = function() {
if (document.getElementById("checkbox").checked) {
// show div
document.getElementById("hiddenDiv").style.display = "block";
} else {
// hide div
document.getElementById("hiddenDiv").style.display = "none";
}
};
// hide on initial page load
document.getElementById("hiddenDiv").style.display = "none";
}
window.onload = function() {
setUp();
};