Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Collapse/Expand All Short and sweet. 1

Status
Not open for further replies.
NetworkGhost

NetworkGhost

IS-IT--Management
Apr 12, 2005
1,324
US
Through some searching on the internet I have been able to find some good help on a collapse/expand script. What I would like to do is enhance a little while keeping the script as short as possible. I would like to still be able to collapse/expand all and also collapse or expand individual images. I figured this would have to be done by dynamically assigning ids a1, a2, a3 etc... and to also be able to perform the collapse/expand all function with a wilcard for teh generated ids a*. Anyone have a script for this? Short an sweet? Thanks for the help.

Code: 
<script>
function hide(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'none';
}
}
function show(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'inline';
}
}
</script>

<a href="#" onclick="show('a');">Show A</a> | <a href="#" onclick="hide('a');">Hide A</a>
<br>
<br>



This is Image 1:<br>
<hr>
<img name="a" src="image1.gif" border="0">
<br>
This is Image 2:<br>
<hr>
<img name="a" src="Image2.gif" border="0">





Free Firewall/Network/Systems Support-
 
Sort by date Sort by votes
I've not tested this, but it would be something along these lines if you really didn't want to make too many modifications to your existing code, or duplicate the functions:

Code: 
<script type="text/javascript">
	function hide(imageGroup, individualImage) {
		if (imageGroup != '') {
			var hide = document.getElementsByName(imageGroup);
		} else {
			var hide = [document.getElementById(individualImage)];
		}
		for (i=0; i<hide.length; i++) {
			hide[i].style.display = 'none';
		}
	}

	function show(imageGroup, individualImage) {
		if (imageGroup != '') {
			var hide = document.getElementsByName(imageGroup);
		} else {
			var hide = [document.getElementById(individualImage)];
		}
		for (i=0; i<hide.length; i++) {
			hide[i].style.display = 'inline';
		}
	}
</script>

<a href="#" onclick="show('a');">Show all A images</a> | <a href="#" onclick="hide('a');">Hide all A images</a>
<br>
<a href="#" onclick="show('', 'a1');">Show image A1</a> | <a href="#" onclick="hide('', 'a1');">Hide image A1</a>
<br>
<a href="#" onclick="show('', 'a2');">Show image A2</a> | <a href="#" onclick="hide('', 'a2');">Hide image A2</a>
<br>



This is Image 1:<br>
<hr>
<img name="a" id="a1" src="image1.gif" border="0">
<br>
This is Image 2:<br>
<hr>
<img name="a" id="a2" src="Image2.gif" border="0">

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Works Great. I tried to make it small by combing the functions together. Doesnt Seem to work though. Any thought?

Code: 
<script type="text/javascript">
    function hide(imageGroup, individualImage) {

        if (imageGroup != '') {
            var hide = document.getElementsByName(imageGroup);
        } else {
            var hide = [document.getElementById(individualImage)];
        }
        for (i=0; i<hide.length; i++) {
            if (hide[i].style.display == 'none') {
		 hide[i].style.display = 'inline'
                 document.write("<B>Satisfied!</B><BR>")  
	else {
hide[i].style.display = 'none' 
document.write("<B>No</B><BR>")
}
}
	
        }
	if (individualImage != '') {
	    var head = document.getElementById("link_" + individualImage)
        	head.innerHTML = head.innerHTML.replace("[+]","[-]")
	}
    }

</script>

<a href="#" onclick="show('a');" >[+] Show all A images</a> | <a href="#" onclick="hide('a');">[+] Hide all A images</a>
<br>
<a href="#" onclick="hide('', 'a1');" id="link_a1">[+] Show image A1</a> 
<br>
<a href="#" onclick="hide('', 'a2');" id="link_a2">[+] Show image A2</a>
<br>



This is Image 1:<br>
<hr>
<img name="a" id="a1" src="datetime.bmp" border="0">
<br>
This is Image 2:<br>
<hr>
<img name="a" id="a2" src="datetime.bmp" border="0">

Free Firewall/Network/Systems Support-
 
Upvote 0 Downvote
Fixed it. Thanks for the help!

Code: 
<script type="text/javascript">
    function hide(imageGroup, individualImage) {

        if (imageGroup != '') {
            var hide = document.getElementsByName(imageGroup);
        } else {
            var hide = [document.getElementById(individualImage)];
        }
        for (i=0; i<hide.length; i++) {
            if (hide[i].style.display == 'none') {
		 hide[i].style.display = 'inline'
                 
	} else {
		hide[i].style.display = 'none' 
}
}
	

	if (individualImage != '') {
	    var head = document.getElementById("link_" + individualImage)
        	head.innerHTML = head.innerHTML.replace("[+]","[-]")
	}
    }

</script>

<a href="#" onclick="show('a');" >[+] Show all A images</a> | <a href="#" onclick="hide('a');">[+] Hide all A images</a>
<br>
<a href="#" onclick="hide('', 'a1');" id="link_a1">[+] Show image A1</a> 
<br>
<a href="#" onclick="hide('', 'a2');" id="link_a2">[+] Show image A2</a>
<br>



This is Image 1:<br>
<hr>
<img name="a" id="a1" src="datetime.bmp" border="0">
<br>
This is Image 2:<br>
<hr>
<img name="a" id="a2" src="datetime.bmp" border="0">

Free Firewall/Network/Systems Support-
 
Upvote 0 Downvote
Ok. I fixed it but then I decided I wanted to do something else with it. I wanted to split the the group and indivuduals into 2 sep if statements. The individual stuff works but group statements arent working

Code: 
<script type="text/javascript">
function hide(imageGroup, individualImage) {

// Specific Image Open/Close Below

if (individualImage != '') {
	var hide = [document.getElementById(individualImage)];
        for (i=0; i<hide.length; i++) {
            if (hide[i].style.display == 'none') {
		 hide[i].style.display = 'inline'
	} else {
		hide[i].style.display = 'none' 
		}
 	}
}

// All Images Open/Close Below

if (imageGroup != '') {
	if (imageGroup = 'a_open') {
	var hide = document.getElementsByName("a");
	for (i=0; i<hide.length; i++) {
		hide[i].style.display = 'inline'
    	}
	} 
	if (imageGroup = 'a_close') {
	var hide = document.getElementsByName("a");
	for (i=0; i<hide.length; i++) {
		hide[i].style.display = 'none'
    	}
	} 
}

// My plus/minus stuff

	if (individualImage != '') {
	    var head = document.getElementById("link_" + individualImage)
        	head.innerHTML = head.innerHTML.replace("[+]","[-]")
	} else {
	     var head = document.getElementById("link_" + individualImage)
        	head.innerHTML = head.innerHTML.replace("[-]","[+]")
	}
    }

</script>

<a href="#" onclick="hide('a_open');" id="show_images">Show all A images</a> | <a href="#" onclick="hide('a_close');" id="hide_images">Hide all A images</a>
<br>


This is Image 1:<br>
<hr>
<a href="#" onclick="hide('', 'a1');" id="link_a1">[+] Show image A1</a> 
<br>
<img name="a" id="a1" src="datetime.bmp" border="0">
<br>
This is Image 2:<br>
<hr>
<a href="#" onclick="hide('', 'a2');" id="link_a2">[+] Show image A2</a>
<br>
<img name="a" id="a2" src="datetime.bmp" border="0">

Free Firewall/Network/Systems Support-
 
Upvote 0 Downvote
If you're going to remove the "else" between the two "if" statements, then you'll need to explicitly pass in two params all the time:

Code: 
hide('a_open'[!], ''[/!]);

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
572
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
622
AbidingDude
AbidingDude
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
189
feherke
feherke
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
126
CrxC01
CrxC01
CrxC01
  • Locked
  • Question
Sum of all primes numbers
Replies
6
Views
224
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top