...

View Full Version : Show and Hide multiple divides at once



Chrys
09-27-2011, 08:26 PM
I have a page that has 26 divides one for each letter A-Z.

I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code?



Javascript: (Short and simple code)
function showstuff(divID){
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
}

function hidestuff(divID){
document.getElementById(divID).style.visibility="hidden";
document.getElementById(divID).style.display="none";
}

HTML: (WHAT A CLUSTER!)

<a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>


So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf().

Logic Ali
09-27-2011, 08:39 PM
You have one function to which you pass the ID to display and also an array containing all the IDs of the involved divs.
With that information it knows what to display and what to hide.

Chrys
09-27-2011, 08:42 PM
Logic Ali:

Thank you for your reply, but I am not sure I understand what you are saying... Please explain.

blaze4218
09-27-2011, 08:46 PM
Consider this from another thread. while it needs modification to work in your scenario it demonstrates a single function that loops through all of the necessary
elements and applies one setting to them all, then it applies another setting to the element that called the function:


<script>
function CLEAR_SUB_SET(subSet){
var cbs = subSet.parentNode.getElementsByTagName("input");
for(c = 0; c < cbs.length; ++c )
{
cbs[c].checked = false;
}
subSet.checked = true;
}

</script>

<form>
<input type="checkbox" name="other_chk"" /> <!-- Not Affected by script -->

<div id="RadioChecks">
<input type="checkbox" name="sub_chk1" onclick="CLEAR_SUB_SET(this);" />
<input type="checkbox" name="sub_chk2" onclick="CLEAR_SUB_SET(this);" />
<input type="checkbox" name="sub_chk3" onclick="CLEAR_SUB_SET(this);" />
</div>
</form>

Chrys
09-27-2011, 08:50 PM
I was trying to link both funtions into one...

showstuff(adivide)
If divide equals adivide, then display
else
hide.

That would mean I just change the function for each letter and it would only need one function per click. I just cannot get it to do that! grrr

xelawho
09-27-2011, 08:52 PM
I don't know what "names" is, but this is what I would do:



<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">
</head>

<body>
<style>
.hide{
display:none;
}
</style>

<div class="hide" name="mydiv" id="adivide">A</div>
<div class="hide" name="mydiv" id="bdivide">B</div>
<div class="hide" name="mydiv" id="cdivide">C</div>
<div class="hide" name="mydiv" id="ddivide">D</div>

<script type="text/javascript">

function showstuff(divID){
els=document.getElementsByName('mydiv')
for (var i = 0; i < els.length; i++) {
els[i].style.visibility="hidden";
els[i].style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
}

</script>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>
<a href="javascript:showstuff('cdivide')">C</a>
<a href="javascript:showstuff('ddivide')">D</a>
</body>
</html>

xelawho
09-27-2011, 09:00 PM
or simpler (being that you're only ever going to show one div at a time):



<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">
</head>

<body>
<style>
.hide{
display:none;
}
</style>

<div class="hide" id="adivide">A</div>
<div class="hide" id="bdivide">B</div>
<div class="hide" id="cdivide">C</div>
<div class="hide" id="ddivide">D</div>

<script type="text/javascript">
var shownDiv;
function showstuff(divID){
if (shownDiv){
document.getElementById(shownDiv).style.visibility="hidden";
document.getElementById(shownDiv).style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
shownDiv=divID;
}

</script>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>
<a href="javascript:showstuff('cdivide')">C</a>
<a href="javascript:showstuff('ddivide')">D</a>
</body>
</html>

blaze4218
09-27-2011, 09:00 PM
<script>
function SWITCH_CONTENT(subSet){
subSet = document.getElementById(subSet);
var cbs = subSet.parentNode.getElementsByTagName("div");
for(c = 0; c < cbs.length; ++c ){
cbs[c].style.display = 'none';
}
subSet.style.display = 'block';
}

</script>
<style>
.hidden{
display:none;
}
</style>
<body>
<div id="something" ></div> <!-- Not Affected by script -->

<div id="MyContainer">

<div id="sub1" class="hidden">sample 1</div>

<div id="sub2" class="hidden">sample 2</div>

<div id="sub3" class="hidden">sample 3</div>

<a href="javascript:SWITCH_CONTENT('sub1');">show 1</a>
<a href="javascript:SWITCH_CONTENT('sub2');">show 2</a>
<a href="javascript:SWITCH_CONTENT('sub3');">show 3</a>

</div>
</body>

Chrys
09-27-2011, 09:07 PM
xelawho:

That is exactly what I was looking for! Thank you so much for your reply!!! :)

PS("names" is simply an anchor on the page where I want the screen to jump to onlick.)

To all others: Thank you very much for your thoughts and replies!

xelawho
09-27-2011, 09:10 PM
you're welcome. I don't know if you say the code I posted in #7, but I prefer it - instead of looping through all the divs and hiding them whether they are hidden or not, it just hides the one that was showing already. Which seems better to me, but any of the solutions posted will suit your needs :thumbsup:

ironboy
09-27-2011, 09:24 PM
Another solution might be basing your two types of elements on different css classes (those clicked to show divides and the divides) and attaching events from javascript based on css class, thus keeping the html code clean from events...

You will have slightly more javascript but cleaner code seperation.

In the example below I've replaced your a-tags with spans, since a-tags are a bit problematic in that the already "do something" even before you assign events to them.


<!DOCTYPE HTML>
<html>
<head>
<style>
.showDivide {cursor:pointer}
.divide {display:none}
</style>
<script>
onload = function(){

var getElementsByClassName = function(className){
var els = document.getElementsByTagName('*'), filtered = [];
className = ' ' + className + ' ';
for(var i = 0; i < els.length; i++){
(' ' + els[i].className + ' ').indexOf(className) >= 0 && filtered.push(els[i])
};
filtered.each = function(func){
var ar = this;
for(var i = 0; i< ar.length; i++){
func.apply(ar[i]);
}
};
return filtered;
};

var divides = getElementsByClassName('divide');
var showDivides = getElementsByClassName('showDivide');

showDivides.each(function(){
this.onclick = function(){
var idToShow = this.innerHTML.toLowerCase().replace(/\s/g,'') + 'divide';
divides.each(function(){
this.style.display = this.id == idToShow ? 'block' : ''
});
}
});

};
</script>
</head>
<body>

<span class="showDivide">A</span>
<span class="showDivide">B</span>
<span class="showDivide">C</span>

<div class="divide" id="adivide">Albert<br/>Ali<br/>Allman</div>
<div class="divide" id="bdivide">Bert<br/>Boris<br/>Bret</div>
<div class="divide" id="cdivide">Ceasar<br/>Cecil<br/>Cecilia</div>

</body>
</html>

blaze4218
09-27-2011, 09:31 PM
@ironboy that's pretty neat. Are there any incompatibility issues associated with that technique?

ironboy
09-27-2011, 09:39 PM
Nope ;)

Chrys
10-07-2011, 09:17 PM
Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time.

live code is also at chryscreations.com/ns/boynames.html

Javascript:


function showstuff(divID)
{
els=document.getElementsByName('mydiv')
for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}


HTML


<head>
<script>
window.onload=function()
{
showstuff('');
}
</script>
</head>

<body>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>
<div name="mydiv" id="adivide">
</div>
<body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum