We Keep Coding

Pass multiple ID's to JS function

My goal in this code is to show specific div tags when the link is clicked and hide all other div tags. I keep rewriting it in different ways but can't seem to get it working properly.
JavaScript below...
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.visibility="visible";
document.getElementById(id2).style.visibility="hidden";
document.getElementById(id3).style.visibility="hidden";
document.getElementById(id4).style.visibility="hidden";
}
HTML below...
Home
Information
Payment
Contact
<div id="home">Content</div>
<div id="info">Content</div>
<div id="payment">Content</div>
<div id="content">Content</div>

Your code is not working properly because you are passing contact in your function instead of content.
Consider using display:none instead of visibility because if you use visibility your content will be hidden but it will leave a space behind:
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.display="block";
document.getElementById(id2).style.display="none";
document.getElementById(id3).style.display="none";
document.getElementById(id4).style.display="none";
}
Home
Information
Payment
Contact
<div id="home">Home Content</div>
<div id="info">Info Content</div>
<div id="payment">Pay Content</div>
<div id="contact">Con Content</div>

If this is your html:
<div id="home" class="singleVisible" onclick="disableOthers(this)">Content #1</div>
<div id="info" class="singleVisible" onclick="disableOthers(this)">Content #2</div>
<div id="payment" class="singleVisible" onclick="disableOthers(this)">Content #3</div>
<div id="content" class="singleVisible" onclick="disableOthers(this)">Content #4</div>
Then this could be your script:
function disableOthers(e) {
var all = document.getElementsByClassName('singleVisible');
for(var i = 0; i < all.length; i++) {
// First make all of the elements with the same class hidden.
if (all[i] !== this) {
all[i].style.visibility = 'hidden';
}
// Then make the clicked element visible.
e.style.visibility = 'visible';
}
}
While I feel that it's important that people learn JavaScript this is the sort of thing that jQuery DOES really help with. The 'onclick' attributes above are not recommended for multiple reasons but if you're going to want to remove those and replace them with actual event handler calls in JavaScript then you ALSO are probably going to want to make sure you support older (IE8, not THAT old) browsers as well. Check this out:
http://www.anujgakhar.com/2013/05/22/cross-browser-event-handling-in-javascript/
In any case, the JQuery version is as simple as removing those onclick attributes and using this script instead:
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
<script>
$('.singleVisible').click(function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
Also, note that best practice (if you can) is to have a parent container and attach the event to that instead. Otherwise in both examples I've given you're attaching four event handlers in each case. It's as simple as wrapping the links in a parent div and doing something like this:
<div id="parent">
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
</div>
<script>
$('#parent').on('click', '.singleVisible', function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
Have fun! =)

Give all your div elements a class. On click:
hide all of them by using
getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
make the particular div visible by its id
Doing these kind of DOM manipulations is very easy with jQuery.

Switch Content of Div onclick

I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).
It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.
I tried it with innerhtml, but it doesnt work:
<div id="container1">
<img src="blablabla">
</div>
<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>

mm... your code works fine, just close img tags and remove semicolon:
<div id="container1">
<img src="blablabla" />
</div>
<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>
here you have a demo: http://jsfiddle.net/HLs86/

HTML
<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
JS
var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});

you just need to add javascript: on your onclick action like this
<div id="container1"></div>
<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>
there is example

toggle visibility multiple divs javascript

Afternoon guys, I am hoping you can help me put the finishing touches to this page. Basically I have four links - each of which will be linked to a different version of content - that will be displayed in the same 3 divs by way of togglevisibility. That is to say that onload, the first link’s content will be displayed (in the three divs) and then the aim is that when another of the four links is clicked, the visible content from the open link closes and the clicked link’s content opens instead. (One thing I have successfully avoided in the code I have so far - and am eager to avoid in the final model - is toggling the page to empty. That is to say if link1’s content is displayed and you click on link1 again, the content stays visible and does not simply toggle on and off.)
Now using the markup below I am oh so close (!) except for the following…
When the page loads the first link’s content is displayed as I want to be, but whenever you click one of the other 3 links it is only div1’s content that successfully loads while the other two divs become empty. I have attempted to alter the toggleVisibility coding (quite crudely I know!) so that each of the 4 links are dealt with as follows;
<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>
Is there a way to fix this error from within the link line (above) so that clicking the link loads the corresponding content into all three divs and not just the first? I am sure it is something simple that I have overlooked or ill-coded!
Thanks very much for your time and advice in advance.
CSS
.section {display:none;}
#link1div1 {display:block;}
#link1div2 {display:block;}
#link1div3 {display:block;}
HTML
<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>
<a href=“#” onclick=“togglevisibility(‘link2div1’); togglevisibility(‘link2div2’);togglevisibility(‘link2div3’);”>Link 2</a>
<a href=“#” onclick=“togglevisibility(‘link3div1’); togglevisibility(‘link3div2’);togglevisibility(‘link3div3’);”>Link 3</a>
<a href=“#” onclick=“togglevisibility(‘link4div1’); togglevisibility(‘link4div2’);togglevisibility(‘link4div3’);”>Link 4</a>
<div id=“div1”>
<div id=“link1div1” class=“section”></div>
<div id=“link2div1” class=“section”></div>
<div id=“link3div1” class=“section”></div>
<div id=“link4div1” class=“section”></div>
</div>
<div id=“div2”>
<div id=“link1div2” class=“section”></div>
<div id=“link2div2” class=“section”></div>
<div id=“link3div2” class=“section”></div>
<div id=“link4div2” class=“section”></div>
</div>
<div id=“div3”>
<div id=“link1div3” class=“section”></div>
<div id=“link2div3” class=“section”></div>
<div id=“link3div3” class=“section”></div>
<div id=“link4div3” class=“section”></div>
</div>
JS
<script type="text/javascript">
function toggleVisibility(selectedTab) {
var section = document.getElementsByClassName('section')
for(var i=0; i<section.length; i++) {
if(section[i].id == selectedTab) {
section[i].style.display = 'block';
} else {
section[i].style.display = 'none';
}
}
}
</script>

I would minimise the use of javascript and do that using css, like this:
DEMO HERE
javascript:
function clickHandler(lnk) {
document.getElementById('sections').className = lnk;
return false;
}
css:
#sections .section {display:none;}
#sections.link1 .link1,
#sections.link2 .link2,
#sections.link3 .link3,
#sections.link4 .link4 { display: block; }
html:
Link 1
Link 2
Link 3
Link 4
<div id="sections" class="link1">
<div id="div1">
<div id="link1div1" class="section link1">11</div>
<div id="link2div1" class="section link2">21</div>
<div id="link3div1" class="section link3">31</div>
<div id="link4div1" class="section link4">41</div>
</div>
<div id="div2">
<div id="link1div2" class="section link1">12</div>
<div id="link2div2" class="section link2">22</div>
<div id="link3div2" class="section link3">32</div>
<div id="link4div2" class="section link4">42</div>
</div>
<div id="div3">
<div id="link1div3" class="section link1">13</div>
<div id="link2div3" class="section link2">23</div>
<div id="link3div3" class="section link3">33</div>
<div id="link4div3" class="section link4">43</div>
</div>
</div>

The reason only one of those is showing is because when you run toggle visibility youre getting every element with the class section then toggling them all off except for the ONE that is called into the function. So when your onclick is done running youve turned on the first two then turned them off when you call the last one.
A simple fix would be to give each div in the big div a classname determining the link.
<div id=“div3”>
<div id=“link1div3” class=“section link1”></div>
<div id=“link2div3” class=“section link2”></div>
<div id=“link3div3” class=“section link3”></div>
<div id=“link4div3” class=“section link4”></div>
</div>
Do the same for the other divs. Then your links be like this ....
<a href=“#” onclick=“togglevisibility(‘link1’);>Link 1 </a>
Change your javascript to.
<script type="text/javascript">
function toggleVisibility(selectedClass) {
var turnOn = document.getElementsByClassName('selectedClass');
var allDivs = document.getElementsByClassName('section');
for(var i=0; i<section.length; i++) { //this for loop hides all the divs
section[i].style.display = 'none';
}
for(var i=0; i<turnOn.length; i++) { // this for loop shows the divs
turnOn[i].style.display = 'block'; // with the link1 class
}
}
</script>
This solution if it works (I havent been able to test) will also keep something on the page at all times which I saw you mentioned in bold in your post.

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?

You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();

I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>

Why not use slideToggle() instead of IF statements....

Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

.js show hide hidden div within hidden div

Thank you in advance for your help! It's my first post, wasn't sure about the formatting so I hope I've done it correctly.
I'd like to know if I can show/hide hidden Nested divs using the following script taken from http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/lyr_swap.htm:
<script type="text/javascript">
function swapLyr(num) {
idCount=0
while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)
if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}
idCount++
}
}
</script>
<ul>
<li onclick="swapLyr(0)">Show Green</li>
<li onclick="swapLyr(1)">Show Yellow</li>
<li onclick="swapLyr(2)">Show Red</li>
<li onclick="swapLyr(3)">Show Blue</li>
</ul>
<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>
I would like to use something like:
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
<a href="#null" onclick="swapLyr(5)">Show Hidden Div within this Div</li>
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>

i see it know. use this:
<div id="mydiv3" style="background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
Show Hidden Div within this Div
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
<script>
function swapLyr(num) {
el=document.getElementById("mydiv"+num);
if(el.style.display=="none"){
el.style.display="block";
}else{
el.style.display="none";
}
}
</script>