Hiding default div when another is shown - javascript

How can I adapt the following code so that one of the divs will be open when the page is first loaded but will close when other divs are opened?
As it is now, the code hides the open div when another is open but only if that div is closed when the page is loaded.
I found the code here: Hiding a div when another is shown
So credit to whoever posted it.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden" />
<ul>
<li>Show myDiv1</li>
<li>Show myDiv2</li>
<li>Show myDiv3</li>
</ul>
<br/>
<div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
myDiv1
</div>
<div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
myDiv2
</div>
<div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
myDiv3
</div>
</body>
This is how I've adapted it so far to make it so each subsequent div can be accessed from the open div, but none of my (inexpert) tinkering has been able to make the code work when the first div in open to begin with, nor have I been able to find the answer using a search engine.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden"/>
<div align="center">Contents</div>
<div id="myDiv1" style="display:none">
Page 1
<br/>
Page 2
</div>
<div id="myDiv2" style="display:none">
<div align="right">Page 2 ►</div>
<br/>
text page 1
</div>
<div id="myDiv3" style="display:none">
◄ Page 1
<br/>
<br/>
text page 2
</div>
</body>

You could just add a call to MyFunction to show one automatically.
So, after the divs, you can add
<script>
MyFunction('myDiv1');
</script>
jsfiddle: http://jsfiddle.net/cyberdash/x8nQs/

Related

How to make each sentence appear on click in a webpage/webapp

I want html/Js/css code for a webpage of atleast 5-10 sentences wherein each sentence should appear on click.
Moreover, as all the content of that page appears, it should lead to another similiar page on the next click.
Can you help?
Try this, click inside the top area this is the body in this snippet here
let textelements = document.querySelectorAll(".text");
let counter = 0;
function clicker(){
if(counter < textelements.length){
textelements[counter].style.visibility = "visible";
counter ++
} else{
window.location.replace("<somepage>");
}
}
.text{
visibility: hidden
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="text1" class="text">Hello how</div>
<div id="text2" class="text">do you do</div>
<div id="text3" class="text">today</div>
<button class="btn" onclick="clicker()">Click Me</button>
</body>

Hide and show text by click on div

I have a question concerning an event onclick. I found this code during my research. My question is : even before the click the text already appears, is it possible to hide the text until we click on the actual button. And is it possible to have numerous onclick event working seperately that is o say only open the text above it? Thank you
<html>
<head>
<title>Show and hide div with JavaScript</title>
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "block") {
div.style.display = "block";
}
else {
div.style.display = "none";
}
}
</script>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
happy coding :)
function showhide() {
var div = document.getElementById("newpost");
div.classList.toggle('hidden');
}
.hidden{
display : none;
}
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<!--if you want by default hidden then add class .hidden in new post -->
<div id="newpost" class="hidden">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
make it by default as none in style on display property.
<div id="newpost" style="display:none">
<p>This div will be show and hide on button click</p>
</div>
Yes. In your stylesheet, have the #newpost div display: none and also add a modifier class, .visible with display: block. Lastly in your function you could toggle the .visible class via classList.toggle and you should be good to go:
var div = document.getElementById('newpost');
document.getElementById('button').addEventListener('click', showhide);
function showhide() {
div.classList.toggle('visible');
}
#newpost {
display: none;
}
#newpost.visible {
display: block;
}
<button id="button">Click Me</button>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
In JQuery you can add multiple on click events to a button like so:
$("#button").on("click", function(){
$("#newpost").toggle();
});
$("#button").on("click", function(){
$("#secondpost").toggleClass("bold");
});
#newpost{
display:none;
}
.bold{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button">Click Me</button>
<p id="secondpost">toggle bold</p>
</body>
</html>
The first on click toggles the paragraph above.
The second on click toggles a class on the last paragraph that makes it bold.
html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
js
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});

Looping images in div element

I'm a beginner starting to learn coding. I have designed an neuroscience related experiment on a webpage with 4 layers of webpage. my first layer will be constant. Second layer shows different images during each round of questioning. Third and fourth layer are questions displayed at certain time intervals and/or on click of submit. I would like to know how do i display the different images every time. Precisely, Can i do it using a for loop!?
<html>
<head>
<Title> Experiment </title>
<link rel="stylesheet" type="text/css" href="displayfieldset.css">
</head>
<body>
<!-- Layer 1 of cross hair image -->
<div id="crosshair" style="background-color:black; position:absolute; width:100%; height:100%; z-index:1; align:center">
<img src="crosshair.jpg" width="1350px" height="750px" >
</div> <!-- Layer 1 closed -->
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z- index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img id="images" src="image1.jpg" style="width:1325px; height:720px; display:none">
</div> <!-- Layer 2 closed -->
<!-- Layer 3 Question 1 -->
<div id="questionone" style="z-index:3; position:absolute; display:none; margin-left: 180px">
<fieldset name="field1_1" id="field1_1">
<form name ="problem1_1" id="problem1_1" >
<b> Identify the problem shown in this image. </b>
<br>
<br>
<input type="text" name="answer1_1" id="answer1_1" maxlength="30" style="width: 400px">
<br>
<br>
<input type="button" value="Submit" onclick="showdiv()" >
</form>
</fieldset>
</div>
<!-- Layer 4 Question 2 -->
<div id="questiontwo" style=" position: absolute; z-index:5; align:center; display:none; margin-left: 180px">
<fieldset name="field1_2" id="field1_2" style="position:relative; align:center">
<form name ="problem1_2" id="problem1_2" >
<b> Propose a solution to the problem. </b>
<br>
<br>
<input type="text" name="solution1_2" id="solution1_2" maxlength="30" style="height: 200px; width: 400px">
<br>
<br>
<br>
<input type="button" value="Submit" onclick="hidediv()" >
</form>
</fieldset>
</div>
<script>
function showdiv()
{
document.getElementById('questiontwo').style.display = "block";
document.getElementById('questionone').style.display = "none";
}
function hidediv()
{
document.getElementById('piclayer').style.display = 'none';
document.getElementById('questionone').style.display = 'none';
document.getElementById('questiontwo').style.display = 'none';
}
<!-- Time out for image -->
setTimeout
( function()
{
document.getElementById('images').style.display = 'block';
}
,6000
);
<!-- Timeout for first question -->
setTimeout
( function()
{
document.getElementById('questionone').style.display = 'block';
}
,12000
);
</script>
</body>
</html>
Based on your coding,
The "crosshair" image, layer-1 is show always at z-index:1.
Layer-2 images will show after 6 seconds of page load at z-index:2.
Layer-3 div will show after 12 seconds of page load at z-index:3.
In the Layer-3, there is a submit button. If user click on the Submit button,
Layer-4 will be display and Layer-3 will be hide.
There is a submit button inside Layer-4 again, if user click on that button, all images will be hidden.
So, what you want to do?
Do you want to show images from Layer-2 by looping? If yes, here is sample codes:
var x = 0;
function myFunction(){
var Layer2Images = document.querySelectorAll("img.images");
if (x == Layer2Images.length)
x=0;
for (i = 0; i < Layer2Images.length; i++) {
Layer2Images[i].style.display = 'none';
}
Layer2Images[x].style.display = 'block';
x++;
}
setInterval(myFunction, 1000)
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z-index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img class="images" src="https://pixabay.com/static/uploads/photo/2012/05/29/00/43/car-49278_1280.jpg" style="width:400px;height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/24353/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/16155/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
</div> <!-- Layer 2 closed -->
Check out document.querySelector and document.querySelectorAll. With those you can target a single DOM node by CSS query selector or you can target multiple DOM all at once and then loop over them in a for of loop by converting the nodes to an array with Array.from.
Full working example
let i = 0
// Grab all the layers and read them into an array so we can iterate them.
let layers = Array.from(document.querySelectorAll('img.layer'))
const nextLayer = () => {
// increment i and compare incremented value, if greater than 3, reset to first layer.
if(++i > 3)
i = 1
// iterate all layers and set their CSS display property to none.
layers.forEach((x) => { x.style.display = 'none' })
// select the single layer we are currently on and set its css display to block.
document.querySelector(`img.layer_${i}`).style.display = 'block'
}
// show first layer
nextLayer()
// show next layer every 2 seconds
setInterval(nextLayer, 2000)
<img class="layer layer_1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<img class="layer layer_2" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg" />
<img class="layer layer_3" src="http://livewallpaper.info/wp-content/uploads/2015/12/Desktop-Cute-Wallpapers-HD-1920x1080-1.jpg" />

Show div and hide siblings when clicking on div

I am having a lot of trouble figuring out how to write the appropriate javascript or jquery to show a specific div when my clickable div is clicked, meanwhile hiding all other divs within the same class that were previously clicked.
HTML
<img src="images/Current system & actors.jpg" alt="" usemap="#Map" style="left:275px; position:absolute; top:247px; width:100%; z-index:1; " usermap="#mymap" >
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" style="position:absolute; left:200px; top:200px; " onclick="MM_showHideLayers('crudeoil','','show')" ></div>
<div class="sqtrigger" id="xNP" style="position:absolute; left:300px; top:200px; " onclick="MM_showHideLayers('NP','','show')" ></div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
JAVASCRIPT
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) {
v=args[i+2];
if (obj.style) {
obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v;
}
}
}
I've found information on doing this with <area> tag however I'd like to avoid rewriting my clickable divs to areas within my map because I have over 100 clickable divs and need a work around solution for now...
Example --> http://jsfiddle.net/berqK/4/
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('x', '');
s = document.getElementById(target_id);
states = document.getElementsByClassName('show');
for (var j = 0; j < states.length; j++) {
states[j].className = '';
}
s.className = 'show';
};
}
So, how can I adjust this code I've found for showing a div when a link is clicked, to showing a div when a div is clicked while still hiding the others?
In reference to my divs ...
How can I make id="xcrudeoil" show id="crudeoil" (and xNP show NP) while at the same time hiding all child divs of div id=info (or within class="textbox")?
Here is an sample of what I have working so far. (note: in my browser the divs appear but I can't see them in fsfiddle): http://jsfiddle.net/ZCantrall/Ru82F/6/
Thanks a lot in advance! I'd really appreciate ANY advice that you can offer.
*EDIT // Second attempt with the CSS from /jsfiddle.net/Ru82F/7/ and the following HTML & JS
<html><head>
<title>IES</title>
<link href="IES.css" rel="stylesheet" media="screen" type="text/css" >
</head>
<body>
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" >Oil</div>
<div class="sqtrigger" id="xNP" >NP</div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
<script> src="jquery-1.9.1.js" </script>
<script> src="jquery-migrate-1.1.0.js" </script>
<script>
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
</script>
</body></html>
This small jQuery script will show the relevant div and hide the others when you click the triggers (there might be issues with the css, I removed it for this test):
$(document).ready(function() {
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
});
http://jsfiddle.net/Ru82F/7/
Could you please try this... http://jsfiddle.net/berqK/22/
JQuery Code...
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('State', 'Layer');
$("div[Id^='Layer']").css('display','none');
$('#'+target_id).show();
};
}
This small jQuery script will show the relevant div and hide the others
$("target_div").nextAll().hide()
$("target_div").prevAll().hide()

JS: Hiding DIV based on another DIVs content

I am looking to hide a number of DIVs based upon the specific text of another DIV. My Javascript (below) isn't working.
The HTML:
<div id="LEGEND">abAB</div>
<div id="small-a"></div>
<div id="small-b"></div>
<div id="big-a"></div>
<div id="big-b"></div>
If the LEGEND DIV contains the text a, then I want it to show only DIV small-a.
If the LEGEND DIV contains the text bA, then I want it to show only DIV small-b and big-a.
The Javascript:
<script>
window.onload = function ShowHide{
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('small-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("b") > 0){
document.getElementById('small-b').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("A") > 0){
document.getElementById('big-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('big-b').style.display = 'block';}
</script>
You are forgetting a couple of things.
A function declaration should be like this
function functionName(args) {
}
You have to hide the divs using style.display = "none"
Example:
<div id="LEGEND">abB</div>
<div id="small-a" style="display: none;">This is small-a</div>
<div id="small-b" style="display: none;">This is small-b</div>
<div id="big-a" style="display: none;">This is big-a</div>
<div id="big-b" style="display: none;">This is big-b</div>
<script>
function showElement(id) {
document.getElementById(id).style.display = "block";
}
window.onload = function ShowHide() {
var legend = document.getElementById("LEGEND").innerHTML;
if(legend.indexOf("a") != -1) showElement("small-a");
if(legend.indexOf("b") != -1) showElement("small-b");
if(legend.indexOf("A") != -1) showElement("big-a");
if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>
The problem is that your code changes the other div elements to block-level elements when div is already a block-level element. You need to set them not to display initially using CSS and then reveal them in the JavaScript.
Try this instead:
<div id="LEGEND">abAB</div>
<div id="small-a" style="display: none;"></div>
<div id="small-b" style="display: none;"></div>
<div id="big-a" style="display: none;"></div>
<div id="big-b" style="display: none;"></div>
<script type="text/javascript">
window.onload = function() {
if (document.getElementById('LEGEND').indexOf('a') > 0) {
document.getElementById('small-a').style.display = 'block';
...
// etc.
}
}
</script>
First, try making sure the window.onload is being called:
window.addEventListener('load', ShowHide, false);
function ShowHide()
{...
Second, you should be looking at the InnerHTML of the element:
if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...
Third, each if statement should also contain an else (replace divName with real div names):
else {
document.getElementById('divName').style.display = 'none'}
Hope that helps!
~md5sum~
EDIT:
Also, I'm not 100% sure on this, but I believe that the syntax:
window.onload = function ShowHide{
will completely fail. I think that the syntax should be:
window.onload = function(){
If me, I will do like this. you dont need to touch HTML part, everything is done in javascript.
you can extend it to CDEFGH...
and you don't need to set <div id="small-X" style="display: none;"> for each tags too. :-)
<body>
<script>
window.onload=function(){
x=document.getElementsByTagName("div");
//first hide everything with small- or big-
for(i in x)
if(/small-|big-/.test(x[i].id))
x[i].style.display="none";
//then turn on each tags based on LEGEND
x= document.getElementById("LEGEND").innerHTML;
for(i=0;i<x.length;i++)
document.getElementById((x[i]<='Z'?'big-':'small-')+x[i].toLowerCase()).style.display='block';
}
</script>
<div id="LEGEND">aAB</div>
<div id="small-a">a</div>
<div id="small-b">b</div>
<div id="big-a">A</div>
<div id="big-b">B</div>
</body>
You need to set the style.display property to none.

Categories