From previous threads I've used the following code.
Current code is available for review at http://jsfiddle.net/sLHKq/
<div id="question1">
<ol>
<li id="correct1">A1</li>
<li id="">A2</li>
</ol>
<div id="answer1" style="display:none;"></div>
<button onclick="toggle('answer1');">Button 1</button>
</div>
<hr>
<div id="question2">
<ol>
<li id="">B1</li>
<li id="correct2">B2</li>
</ol>
<div id="answer2" style="display:none;"></div>
</div>
<button onclick="toggle('answer2');">Button 2</button>
The Javascript I used is as follows for OnClick correct1 and correct2 id's in both divs are changing background color.I tried this code to achieve it for Only the respective Button's toggle to work.
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct1").style.backgroundColor = '#BCF5A9';
document.getElementById("correct2").style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct1").style.backgroundColor = '#FFFFFF';
document.getElementById("correct2").style.backgroundColor = '#FFFFFF';
}
}
How can restrict the onclick and background color change to just the question's button div ?
do you mean like:
function toggle(id) {
var e = document.getElementById("answer" + id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
}
}
See updated Fiddle
I would suggest to pass correct answer id also in the function like this:
function toggle(id, ans) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById(ans).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById(ans).style.backgroundColor = '#FFFFFF';
}
}
check fiddle: http://jsfiddle.net/sLHKq/2/
Related
Searched around and couldn't find what I was looking for. I have 2 buttons that pull up a two different select boxes on a click and they will disappear with a second click. However, I want select box 1 to disappear on Button click 2 and vice versa: select box 2 will disappear on Button click 1.
HTML:
window.onload = function()
{
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
function button2function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>
<select id="name1">
<option value="">What would you like to know..</option>
</select>
<select id="name2">
<option value="">What would you like to know 2..</option>
</select>
Like this? https://jsfiddle.net/o3btLkpd/
try calling this at the top of the event handler for button 1:
document.getElementById('name2').style.display = 'none';
and this in the handler for button 2:
document.getElementById('name1').style.display = 'none';
the full resulting code would be like this:
window.onload = function() {
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id) {
document.getElementById('name2').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
function button2function(id) {
document.getElementById('name1').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
Here is the problem:
I have a slideshow containing 3 slides changing after 10 seconds which is generated by plugin so i don't have access to the html file.
<ul>
<li data-index="rs-101">
<li data-index="rs-102">
<li data-index="rs-103">
</ul>
<div class="content1">
content1
</div>
<div class="content2">
content2
</div>
<div class="content3">
content3
</div>
This slider is on the top of the screen and now I want to change the bottom of the screen according to the slides:
if rs-101 is selected: do this
if rs-102 is selected: do that
..
I found this which is not working:
function Content1(){
if ( $('html').attr('data-index') == 'rs-101' ) {
var x1 = document.getElementById("content1");
x1.style.display = "block";
} else {
x1.style.display = "none";
}
function Content2(){
if ( $('html').attr('data-index') == 'rs-102' ) {
var x1 = document.getElementById("content1");
x2.style.display = "block";
} else {
x2.style.display = "none";
}
function Content3(){
if ( $('html').attr('data-index') == 'rs-103' ) {
var x3 = document.getElementById("content1");
x3.style.display = "block";
} else {
x3.style.display = "none";
}
Please advice.
You could use something like this https://stackoverflow.com/a/18311216/9785689 to monitor the list for changes, when it detects a change call a single function changeContent(). If this doesn't work then you need to have a way to listen for the automated changes from the plugin (I would check with the author or the plugin).
function ChangeContent(){
var data = $('html').attr('data-index');
if ( data == 'rs-101' ) {
var x1 = document.getElementById("content1");
x1.style.display = "block";
} else {
x1.style.display = "none";
}
if ( data == 'rs-102' ) {
var x1 = document.getElementById("content1");
x2.style.display = "block";
} else {
x2.style.display = "none";
}
if ( data == 'rs-103' ) {
var x3 = document.getElementById("content1");
x3.style.display = "block";
} else {
x3.style.display = "none";
}
}
I'm trying to hide and show two divs with one click.
<a href="javascript:showhide('bbb','ccc4')">
you click here to see two div contents </a>sddsds<br />
</a>
I have been able to only hide and show one div. When I try to hide and show two divs, using ID, I can't. I've tried some other suggestions, but they do not work.
<a href="javascript:showhide('bbb','ccc4')">
you click here to see two div contents </a>sddsds<br />
</a>
<div target='ccc4' name='ccc4' id='ccc4' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ' > ddfddddd
<iframe class='shark' src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='ccc' name='ccc' id='ccc' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ></iframe>
</div> <div target='bbb' name='bbb' id='bbb' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ' > sdds
<iframe class='shark' src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='bbb' name='bbb' id='bbb' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ></iframe>
</div>
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
I've tried using the Javascript below, but it doesn't work either.
<script type="text/javascript">
function toggle_visibility() {
for (var i = 0, len = arguments.length; i < e; i++) {
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
Is there a way to hide more than one div with one click, or must I use class instead of using ID?
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
Here you are dealing only with one ID.
Rewirite your function to hide two IDs. Something like that:
function showhide(id1, id2) {
var e = document.getElementById(id1);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
e = document.getElementById(id2);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
To reduce code replication use array to store ids:
function showhide(ids) {
for (var i = 0; i < ids.length; i++) {
var e = document.getElementById(ids[i]);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
}
And call it:
showhide(['bbb', 'ccc4'])
Or you can use arguments:
function showhide() {
for (var i = 0; i < arguments.length; i++) {
var e = document.getElementById(arguments[i]);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
}
In this case call should be:
showhide('bbb', 'ccc4')
Add each div you want to toggle display as a seperate parameter:
<a href="javascript:showhide('bbb', 'ccc4')">
Then change your JS to include a loop over the arguments array:
<script type="text/javascript">
function showhide() {
for(var i = 0; i < arguments.length; i++){
var e = document.getElementById(arguments[i]);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
}
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<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>
<a onclick="toggle_visibility('div-to-hide');">
<div id="div-to-hide" class="div-to-hide">
---- content here ---
</div>
My version
window.onload=function() {
document.getElementById("ccc4").style.display="none";
document.getElementById("bbb").style.display="none";
document.getElementById("toggle").onclick=function() {
var divs = this.getAttribute("data-divs").split(",");
for(var i = 0,len = divs.length;i < len;i++){
var e = document.getElementById(divs[i]).style;
console.log(e.display)
e.display = (e.display == "") ? "none" : "";
}
return false;
}
}
<a href="turnonjs.html" id="toggle" data-divs="ccc4,bbb">
you click here to see two div contents </a>
<div target='ccc4' name='ccc4' id='ccc4'>div 1</div>
<div target='bbb' name='bbb' id='bbb'> div 2</div>
Or give both divs the same class and use document.querySelectorAll(".classname")
So I have this code that I will put in jsfiddle link bellow. Im making hide/show divs by clicking on links. Only problem is when I want to view a div (second, third or fourth div), lets say the third one, it doesnt show up on top but benith the first and second invisible divs. Anybody got any idea how to make this right and put any selected div on the top of the page?
<body>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="menu">
<li>Felge</li>
<li>Gume</li>
<li>Branici</li>
<li>Farovi</li>
</ul>
</div>
<div class="col-md-3">
<div class="div" id="content1">
<p>BBS</p>
<p>ENKEI</p>
<p>KONIG</p>
</div>
<div class="div" id="content2">
<p>Michelin</p>
<p>Hankook</p>
<p>Sava</p>
</div>
<div class="div" id="content3">
<p>AMG</p>
<p>Brabus</p>
<p>Original</p>
</div>
<div class="div" id="content4">
<p>Angel Eyes</p>
<p>Devil Eyes</p>
<p>Original</p>
</div>
</div>
`<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
function show(id) {
if (id == 'link1') {
document.getElementById("content1").style.visibility = 'visible';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link2') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'visible';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link3') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'visible';
document.getElementById("content4").style.visibility = 'hidden';
}
else if (id == 'link4') {
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'visible';
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
`
https://jsfiddle.net/4qq6xnfr/
visibility: hidden hides element but leaves the space occupied by it. You need to hide element with display: none:
document.getElementById("content1").style.display = 'block';
document.getElementById("content2").style.display = 'none';
document.getElementById("content3").style.display = 'none';
document.getElementById("content4").style.display = 'none';
Also, you can optimize you code a little. Maybe like this:
function show(id) {
var number = id.replace('link', '');
var blocks = document.querySelectorAll("[id^=content");
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.display = 'none';
}
document.querySelector('#content' + number).style.display = 'block';
}
Demo: https://jsfiddle.net/4qq6xnfr/3/
Use:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
The most efficient way to achieve this is as follows:
Change all the links from javascript:show('link1'), javascript:show('link2'), etc. to just #content1, #content2, etc.
You can now remove all of the javascript code.
Create a new CSS stylesheet (or use the <style> tags), and in the stylesheet, write the following -
.div {
display:none;
}
.div:target {
display:block;
}
That's it! I hope this helped you.
the code so far
Now if you press a button, no matter which one, a div and a percentage will be shown. I've got that going for me, but if one div is toggled, and another one is pressed, the 66% div should be toggled and so on if two divs are shown and the third is toggled the 100% div should show up.
Basicly if you click a button, a div and a percentage div is revealed if you click aonther the percentage bar goes up. How do I do this? if two divs are toggled and if you press the button two diffrent divs are shown?
JS
function showhide()
{
var div = document.getElementById("lol");
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
if (div.style.display !== "none")
{
div.style.display = "none";
id3.style.display = "none";
}
else {
div.style.display = "block";
}
}
function showhide2()
{
var div2 = document.getElementById("lol2");
if (div2.style.display !== "none") {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
function showhide3()
{
var div3 = document.getElementById("lol3");
if (div3.style.display !== "none") {
div3.style.display = "none";
}
else {
div3.style.display = "block";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>
Not entirely sure what you mean but I think it might be something like this?
http://liveweave.com/PcZ7vL
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="lol1"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "7"><p>100%</p></div>
</body>
</html>
JavaScript:
var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
function showhide()
{
if (div1.style.display !== "none")
{
div1.style.display = "none";
one = 0
}
else {
div1.style.display = "block";
one = 1
}
showper();
}
function showhide2()
{
if (div2.style.display !== "none") {
div2.style.display = "none";
two = 0
}
else {
div2.style.display = "block";
two = 1
}
showper()
}
function showhide3()
{
if (div3.style.display !== "none") {
div3.style.display = "none";
three = 0
}
else {
div3.style.display = "block";
three = 1
}
showper()
}
function showper()
{
var sum = one + two + three
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
if (sum == 1) {
id3.style.display = "block";
} else if (sum == 2) {
id5.style.display = "block";
} else if (sum == 3) {
id7.style.display = "block";
}
else {
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
}
}
EDIT:
A slightly neater way to do it would be this: http://liveweave.com/YAHn55.
Also, you should take a look at jQuery, makes things like this much simpler.
EDIT:
see example