Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1839 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Show/hide dilemma

Thread title: Show/hide dilemma
Closed Thread    
    Thread tools Search this thread Display Modes  
07-15-2007, 05:46 PM
#1
Jeff Andersen is offline Jeff Andersen
Status: Superstar
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 4,449
iTrader: 10 / 100%
 

Jeff Andersen is on a distinguished road

  Old  Show/hide dilemma

I was just wondering anyone could assist me with a bit of javascript. I have a simple show/hide toggle script:

Code:
	<script language="javascript">
	<!--

	var state = 'none';

	function showhide(layer_ref) {

	if (state == 'block') {
	state = 'none';
	}
	else {
	state = 'block';
	}
	if (document.all) { 
	eval( "document.all." + layer_ref + ".style.display = state");
	}
	if (document.layers) { 
	document.layers[layer_ref].display = state;
	}
	if (document.getElementById &&!document.all) {
	hza = document.getElementById(layer_ref);
	hza.style.display = state;
	}
	}
	//-->
	</script>
Works awesome, however I want to modify it so that if "Div1" is shown, "Div2" cannot be expanded. Is there a way I can do this?

Thanks
Jeff

07-15-2007, 05:49 PM
#2
localhost is offline localhost
localhost's Avatar
Status: Dediport Hosting
Join date: Jul 2006
Location: Berkshire
Expertise: programming, business
Software: Dreamweaver
 
Posts: 1,316
iTrader: 17 / 100%
 

localhost is on a distinguished road

  Old

Sorry, I'm not this advanced at javascript, however you would be able to do it quite easily in mootools, then i could help you. :d

07-15-2007, 06:44 PM
#3
Xuxa is offline Xuxa
Status: Request a custom title
Join date: Feb 2006
Location: USA
Expertise:
Software:
 
Posts: 1,076
iTrader: 17 / 95%
 

Xuxa is on a distinguished road

Send a message via MSN to Xuxa

  Old

If you used AJAX and Prototype I could help you

07-15-2007, 07:09 PM
#4
Jeff Andersen is offline Jeff Andersen
Status: Superstar
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 4,449
iTrader: 10 / 100%
 

Jeff Andersen is on a distinguished road

  Old

I don't want to sound crude, but I was looking for help in solving my current problem not "If you would have used this, I'd help you". If you're confident in those methods please enlighten me as to how to use them.

Thanks
Jeff

07-16-2007, 12:44 PM
#5
Choco is offline Choco
Status: Member
Join date: Jul 2007
Location: USA
Expertise:
Software:
 
Posts: 240
iTrader: 2 / 100%
 

Choco is on a distinguished road

Send a message via MSN to Choco

  Old

Would you mind if I wrote you a new script for this task? I find editing other people's scripts a chore :P

07-16-2007, 01:09 PM
#6
Choco is offline Choco
Status: Member
Join date: Jul 2007
Location: USA
Expertise:
Software:
 
Posts: 240
iTrader: 2 / 100%
 

Choco is on a distinguished road

Send a message via MSN to Choco

  Old

Okay, I finished. I made it exactly to your specifications, except I need to know one thing -- if div2 is open, can you open div1? (Notice -- I'm not saying if you can open div2 when div1 is open!)

Right now, you can open both by opening div2 first. I can fix that if you'd like, but here's the testing page right now:
Code:
<html>
<body>
<script type="text/javascript">
divstate1 = "none";
divstate2 = "none";
divid1 = "div1";
divid2 = "div2";
function perform(ref,which) {
  ie=(document.all);
  lay=(document.layers);
  dom=(document.getElementById&&!document.all);
  divstate=(which>0)?divstate2:divstate1;
  if(ie) document.all[ref].style.display = divstate;
  if(lay) document.layers[ref].display = divstate;
  if(dom) document.getElementById(ref).style.display=divstate;
}
function showhide(reference) {
  if(reference==divid1) {
    divstate1 = divstate1=="block"?"none":"block";
    perform(divid1,0);
  } else {
    divstate2 = divstate1=="block"||divstate2=="block"?"none":"block";
    perform(divid2,1);
  }
}
</script>
<div id="div1" style="display:none;height:200px;width:200px;background-color:red;">ZOOP</div>
<div id="div2" style="display:none;height:200px;width:200px;background-color:blue;">ZOOP2</div>
<a href="javascript:showhide('div1')">div1</a> | <a href="javascript:showhide('div2')">div2</a>
</body>
</html>
And here is just the script:
Code:
<script type="text/javascript">
divstate1 = "none";
divstate2 = "none";
divid1 = "div1";
divid2 = "div2";
function perform(ref,which) {
  ie=(document.all);
  lay=(document.layers);
  dom=(document.getElementById&&!document.all);
  divstate=(which>0)?divstate2:divstate1;
  if(ie) document.all[ref].style.display = divstate;
  if(lay) document.layers[ref].display = divstate;
  if(dom) document.getElementById(ref).style.display=divstate;
}
function showhide(reference) {
  if(reference==divid1) {
    divstate1 = divstate1=="block"?"none":"block";
    perform(divid1,0);
  } else {
    divstate2 = divstate1=="block"||divstate2=="block"?"none":"block";
    perform(divid2,1);
  }
}
</script>
divstate1 is equal to the starting state of div1.
divstate2 is equal to the starting state of div2.
divid1 is equal to the ID of div1.
divid2 is equal to the ID of div2.

You call it by simply doing showhide('div1') (where div1 is the ID of the element).

I tested it in IE 6,7 and Firefox 1.5,2. See if that works for you

07-16-2007, 01:40 PM
#7
Jeff Andersen is offline Jeff Andersen
Status: Superstar
Join date: Apr 2005
Location:
Expertise:
Software:
 
Posts: 4,449
iTrader: 10 / 100%
 

Jeff Andersen is on a distinguished road

  Old

Thanks a bunch Choco!

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed