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")
Related
For my website I need a function with questions and answers in loop.
After the last question the first question should come again.
I have found something but the loop does not work, it is certainly simple but I do not get that.
<!DOCTYPE html>
<html>
<body>
<div>
<div id="question" onclick="changeText()">
Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
are you ready?
</div>
</div>
<script type="text/javascript">
var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
var questionList = details.split("qst:");
var div = document.getElementById('question');
var ans = document.getElementById('answer');
function changeText(){
if (div.style.display !== 'none') {
div.style.display = 'none';
ans.style.display = 'block';
}
else {
div.style.display = 'block';
ans.style.display = 'none';
}
}
function nextQuestion(){
div.style.display = 'block';
ans.style.display = 'none';
var max = questionList.length;
if(max > 0){
var num = 0;
var qst = questionList[num].split("ans:");
div.innerHTML =qst[0];
ans.innerHTML = qst[1];
questionList.splice(num,1);}
else {
}
}
</script>
</body>
</html>
You must reset value of n every time reach to max so you must put n in outer scope in global variable scope and don't splice questionList because you want to iterate over that array again after reaching to end of it:
var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
var questionList = details.split("qst:");
var div = document.getElementById('question');
var ans = document.getElementById('answer');
//Variable n must declare here
var num = 0;
function changeText() {
if (div.style.display !== 'none') {
div.style.display = 'none';
ans.style.display = 'block';
} else {
div.style.display = 'block';
ans.style.display = 'none';
}
}
function nextQuestion() {
div.style.display = 'block';
ans.style.display = 'none';
var max = questionList.length;
if (max > 0) {
var qst = questionList[num].split("ans:");
div.innerHTML = qst[0];
ans.innerHTML = qst[1];
//there is no need to splice questionList
//questionList.splice(num, 1);
num++;
//Check for num to not to be greater than questionList.length
if (num >= max)
num = 0;
} else {
}
}
<div id="question" onclick="changeText()">
Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
are you ready?
</div>
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
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/
Hi i have a tab menu and i wanted to activate tab 2 when i click on a button from tab 1..
here is my javascript:
<link rel="stylesheet" type="text/css" href="http://oliveshades.com/dashboard_menu.css">
<script type='text/javascript' src="http://oliveshades.com/jquery.idTabs.min.js"></script>
<script type='text/javascript'>
function toggle_visibility(id) {
var thelist = document.getElementsByClassName("alist");
for (var i = 0; i < thelist.length; i++) {
thelist[i].style.display = 'none';
}
var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}</script>
here is my HTML:
<div class="dashTab">
<ul class="idTabs">
<li>Statistics</li>
<li>Traffic</li>
</ul></div>
<div id="tab1"><input name="" type="button" value="redirect me to tab 2" /></div>
<div id="tab2">This is Tab2</div>
http://jsfiddle.net/UCjYS/
Try this:
function changeTab(arg){
switch(typeof arg){
case "number":
$('.idTabs > li:eq(' + arg + ') > a').click();
break;
case "string":
$('.idTabs > li:contains(' + arg + ') > a').click();
break;
}
}
http://jsfiddle.net/DerekL/UCjYS/1/
idTabs doesn't seem to have methods to activate a tab, but you can trigger it manually.
$('#tab1 input').click(function(){
$('li:contains("Traffic")').click();
return false;
});