How Do I Get A Div to Completely Clear When I Toggle? - javascript

I'm attempting to have a div that runs split screen. The left panel will have multiple links, so the simple toggle I am using is ineffective. I need to be able to clear out the right div and replace it with the next selected link. (Something similar to this
https://www.itriagehealth.com/conditions) Right now, it just stacks the selected links.
I realized I can't do this with CSS alone and am still playing with javascript, but this is the concept I have so far:
https://jsfiddle.net/od9bnez4/1/
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

That fiddle should work, there's just an error in your function declaration, missing the closing brace }, and then change the JavaScript execution (with the gear next to 'JavaScript') to run as a tag in the <head> or <body>, not sure why onLoad isn't working there.

Something like this will do the trick, https://jsfiddle.net/od9bnez4/3/
The heart of it is this,
var left = document.getElementById("left");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
left.addEventListener('click', function() {
if (div1.style.display == "none") {
div1.style = "display: block;";
div2.style = "display: none;";
} else {
div1.style = "display: none;";
div2.style = "display: block;";
}
});
Obviously this only works for two elements and is very procedural. Typically someone would use something like jQuery for this, or even a framework like Angular or React to build a modularized component.

This is pretty easy. JQuery makes it more flexible.
<!DOCTYPE html>
<html>
<head>
<script>
function toggle()
{
var e = document.getElementById('diva');
var f = document.getElementById('divb');
if (f.style.display == 'none')
{
e.style.display = 'none';
f.style.display = 'block';
}
else
{
f.style.display = 'none';
e.style.display = 'block';
}
}
function togglejquery()
{
if ($('#divb').css('display') == 'none')
{
$('#diva').hide(); // or slideUp('fast');
$('#divb').show(); // or slideDown('fast');
}
else
{
$('#divb').hide();
$('#diva').show();
}
}
</script>
</head>
<body onload="positionScreenBottom();">
<div style="float:left; width:40%;">
<a href='#' onclick='toggle();'>Show A</a><br/>
<a href='#' onclick='toggle();'>Show B</a><br/>
</div>
<div style="float:left; width:60%;">
<div id='diva' style='float:left;'>Here is A</div>
<div id='divb' style='float:left; display:none;'>Here is B</div>
</div>
</body>
</html>

Related

How to toggle div?

I searched around stack overflow and I tried just about every topic - none of them worked. I'm trying to toggle the "inventory" div to block instead of none after you click the button "btnTwo". How would you do this? This is my current code:
<script>
function one()
{
var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>';
var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
document.getElementById("a").innerHTML = "You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
var myButton = document.getElementById('btnOne');
myButton.onclick = four;
}
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
function three()
{
document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
function four()
{
document.getElementById("d").innerHTML="You feel a stick stuck to the wall with something like honey. Next to it is a few rocks.";
}
</script>
<div style="margin-left:15px; width:200px; margin-top:100px;">
<button id="btnOne" onclick="one()">Feel around the cave</button>
</div>
<div id="inventory" style="margin-left:255px; width:200px; height:600px; margin-top:-15px; display:none;">
Sticks:
<div id="stickNumber">1</div>
</div>
<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;">
<div id="d"></div>
<div id="c"></div>
<div id="b"></div>
<div id="a"></div>
</div>
Change
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
to
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
document.getElementById("inventory").style.display = "block";
}
Updated example
Well. If you want to toggle something you just need to first check the state of the object, and apply the oposite of what is set.
var el = document.getElementById('el'); //some div
var bt = document.getElementById('bt'); // some button
el.style.display = "block";
bt.onclick = function(){
if(el.style.display == "block"){
el.style.display = "none";
}else{
el.style.display = "block";
}
}
Working fiddle
You could also use some library like for instance jquery where this would be as easy like:
$("#bt").click(function(){
$("#el").toggle();
})
Working fiddle
For your case, you just need to add below script into the bottom of function two():
document.getElementById("inventory").style.display = 'block';
I have test the code on safari and chrome.

Javascript: want 2 different text links to display 2 different divs (in the same place)

Not sure if i should be using a z-index or hidden approach, I've tried a few different ways and just can't get anything to work for me.
i can get a link to display one, and even have one link shuffle between the two, but i just can't seem to get 2 differnt links to work on the two different divs.
the code now is:
function toggle_visibility("music" , "contact") {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
music
contact
<div id="music" style="display:none;">
stuff
</div>
<div id="contact">
stuff
</div>
Maybe something like the following?
http://jsfiddle.net/vhzAR/
HTML:
music
contact
<div id="music" style="display:none;"> music stuff </div>
<div id="contact"> contact stuff </div>
JavaScript:
function toggle_visibility(enable, disable) {
var e = document.getElementById(enable);
e.style.display = 'block';
e = document.getElementById(disable);
e.style.display = 'none';
}
document.getElementById('music_toggle').onclick = function() {
toggle_visibility('music', 'contact');
};
document.getElementById('contact_toggle').onclick = function() {
toggle_visibility('contact', 'music');
};

Unable to show Div based on If statement

Can anyone please help me to resolve this Javascript issue:
I need to show few div component based on the current website's hostname and need to do this only during the initial load of the Page. I've developed a Javascript code for this but unable to show/hide div components in the desired manner.
The following Javascript code always gives an "Uncaught SyntaxError: Unexpected token else" Error on the console.
<html>
<head>
<script>
var hostName = window.location.host;
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
If(String(hostName).indexOf('w3schools') !== -1)
{
document.getElementById('iframePortal').style.display = 'block';
document.getElementById('iframeNormal').style.display = 'none';
}
else {
document.getElementById('iframePortal').style.display = 'none';
document.getElementById('iframeNormal').style.display = 'block';
}
</script>
</head>
<body>
<div id="iframeNormal">
some text 1
</div>
<div id="iframePortal">
another 1
</div>
</body>
</html>
use if instead of If like this
if(hostName.indexOf('w3schools') !== -1)
First thing is js is case sensitive as they told you. 2nd thing is you are trying to access the elements before they are fully loaded. Modify your code to:
<html>
<head>
</head>
<body>
<div id="iframeNormal">
some text 1
</div>
<div id="iframePortal">
another 1
</div>
<script>
var hostName = window.location.host;
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
if(String(hostName).indexOf('w3schools') !== -1)
{
document.getElementById('iframePortal').style.display = 'block';
document.getElementById('iframeNormal').style.display = 'none';
}
else {
document.getElementById('iframePortal').style.display = 'none';
document.getElementById('iframeNormal').style.display = 'block';
}
</script>
</body>
</html>
You have "I" letter in uppercase -> replace it with "i"... so, should be 'if'.
I would use window.location.hostname instead of window.location.host,
also typeof(window.location.hostname) return 'string' so you don't need to wrap hostname in if statement with String
<script>
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
if(window.location.hostname.indexOf('w3schools') >= 0){
div1.style.display = 'block';
div2.style.display = 'none';
}else{
div1.style.display = 'none';
div2.style.display = 'block';
}
</script>
Here is a working jsFiddle: http://jsfiddle.net/rsFPF/
I had to use some css too. Please give it a try.
Don't use jsFiddle? Below is the code:
Html:
<div id='iframeNormal' class='iframes'> some text 1 </div>
<div id='iframePortal' class='iframes'> another 1 </div>
CSS:
.iframes
{
display: none;
}
javascript:
var div1 = document.getElementById('iframeNormal');
var div2 = document.getElementById('iframePortal');
if (window.location.host.indexOf('w3schools') !== -1)
{
div1.style.display = 'block';
}
else
{
div2.style.display = 'block';
}

Spot div on same position

I am trying to show hide image using javascript. Code works fine but image displays on different location. Now i want to show and hide the images on same spot.
<script type="text/javascript">
function showImage()
{
if(document.getElementById('check').checked==true)
{
document.getElementById("image").style.visibility = 'visible';
document.getElementById("images").style.visibility = 'hidden';
}
else if(document.getElementById('check').checked==false)
{
document.getElementById("image").style.visibility = 'hidden';
document.getElementById("images").style.visibility = 'visible';
}
}
</script>
<body onload="showImage()">
<font align="left">
<input type="checkbox" id="check" onclick="showImage()" />
Show Image
<div class="checkboxes" id = "image" >
<img class = "jive-image" height="125" src ="Tulips.jpg ">
</div>
<div id="images">
<img class = "jive-image" height="125" src="Desert.jpg">
</div>
</body>
How it possible?
If you use the display style you can remove the image from the page and not just hide it like visibility. This will mean the bottom image is pushed up as the first isn't taking up space any more. Set element.style.display to 'block' to show the element and 'none' to hide it.
jsFiddle
function showImage() {
if (document.getElementById('check').checked == true) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else if (document.getElementById('check').checked == false) {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
}
It's because you're using visibility. CSS's visibility style doesn't affect the page flow. It's as if you were setting the opacity to 0. Instead, you may want to use display.
function showImage() {
if(document.getElementById('check').checked) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
};
Instead setting visibility, set display to either none or block.

Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the JavaScript work looks like this:
< href="#" onclick="toggleVisibility();">About
< href="##" onclick="toggleVisibility1();"> Products
here is another, simple function
<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>
if you click here, #foo will change visibility
<div id="foo">blablabla</div>
Without jQuery, you would want to do something like this:
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
About
Products
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
About
Products
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
Simple solution is like this:
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
use CSS display: property
element disappear
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
PS
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html

Categories