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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

hide expand div tags

Status
Not open for further replies.
DotNetGnat

DotNetGnat

Programmer
Mar 10, 2005
5,548
IN
Guys, I have this below code

Code: 
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
} 
//-->
</SCRIPT>
</head>
<body>
<a href="javascript:showHide('div1')">Expand/Hide div1</a>
<div id="div1" style="display:none;border:thin solid;"> 
div1 content
</div>
<a href="javascript:showHide('div2')">Expand/Hide div2</a>
<div id="div2" style="display:none;border:thin solid;"> 
div2 content
</div>

</body>
</html>

it works fine and the divs expand and hide on clicking the hyperlinks...but when i exapnd the first div i want to close the div2 is it is open and vice versa...i mean i dont want both the div to be at the same time...

how can i do that...

thanks

-DNG
 
Sort by date Sort by votes
try this:
Code: 
visibleDiv = "";
function showHide(elementid){
	if (document.getElementById(elementid).style.display == 'none'){
		document.getElementById(elementid).style.display = '';
		if(visibleDiv != ""){
			document.getElementById(visibleDiv).style.display = 'none';
		}
		visibleDiv = elementid;
	} else {
		document.getElementById(elementid).style.display = 'none';
	}
}

_______________
_brian.
 
Upvote 0 Downvote
thank you...it works just fine...i have one last question for you...i need to change my showHide function to accept one more variable(ASP variable) and if it is not empty then then current div to be shown...here is the modified code...

Code: 
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
visibleDiv = "";
function showHide(elementid,[red]qstring[/red]){
    if (document.getElementById(elementid).style.display == 'none'){
        document.getElementById(elementid).style.display = '';
        if(visibleDiv != ""){
            document.getElementById(visibleDiv).style.display = 'none';
        }
        visibleDiv = elementid;
    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</SCRIPT>
</head>
<body>
<a href="javascript:showHide('div1',[red]'<%=Request.QueryString("blah")'[/red])">Expand/Hide div1</a>
<div id="div1" style="display:none;border:thin solid;"> 
div1 content
</div>
<a href="javascript:showHide('div2',[red]'<%=Request.QueryString("blah")'[/red])">Expand/Hide div2</a>
<div id="div2" style="display:none;border:thin solid;"> 
div2 content
</div>

</body>
</html>

when the div is shown there are some button events inside it which takes you back to the same page with a querystring...but when i click on the button the page gets refreshed again and the div is hidden...How do i make it show when a button is clicked inside the div??

thanks

-DNG
 
Upvote 0 Downvote
oh BTW i just noticed that there is a glitch in your code...

when i click on the expan/hide div for the first time, it expand, if i click again it hides...BUT if i click the third time it does not expand again...

whats up with that...

Thanks

-DNG
 
Upvote 0 Downvote
well, i would recommend checking to see if the query string exists using ASP, then outputting true or false into that 2nd javascript variable.

I don't quite understand what you mean "then current div to be shown"

here's the fix to the other problem with 3 clicks.
Code: 
visibleDiv = "";
function showHide(elementid,qstring){
  if (document.getElementById(elementid).style.display == 'none'){
    document.getElementById(elementid).style.display = '';
    if(visibleDiv != ""){
      [b]if(visibleDiv != elementid){[/b]
        document.getElementById(visibleDiv).style.display = 'none';
      [b]}[/b]
    }
    visibleDiv = elementid;
  } else {
    document.getElementById(elementid).style.display = 'none';
  }
}

_______________
_brian.
 
Upvote 0 Downvote
ok let me try to explain...lets say i have only one hyperlink and one div element...something like this:

<a href="javascript:showHide('div1','<%=Request.QueryString("blah")')">Expand/Hide Div</a>
<div id="div1" style="display:none;border:thin solid;">
[red]div1 content[/red]
</div>

now when click on the Expand/Hide Div it behave well and shows and hide accordingly...

now lets say i have a button event as the div content at the place shown in red...when i click the button...the page gets refreshed...and div is hidden...i dont want it to hide at the time...

did i make it any clear...

-DNG
 
Upvote 0 Downvote
oh, then you need to just set the link as:

file.asp?div1 or file.asp?show=div1

then, on your divs you need to check to see if their id is listed in the query string. if so, the do not set the style to "display:none". You won't need a second parameter in your javascript in this case.

_______________
_brian.
 
Upvote 0 Downvote
thank you very much...i will try your suggestion...have a star for your efforts...much appreciated

-DNG
 
Upvote 0 Downvote
bdichiara, I did not get it working...can you take a look at the code again and see what I am doing wrong...

Code: 
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
[blue]
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
 return "";
}
[/blue]
[green]
visibleDiv="";
var qstring;
qstring = getQueryVariable("show");
[/green]            
function showHide(elementid){

    if (document.getElementById(elementid).style.display == 'none'){
		document.getElementById(elementid).style.display = '';
        if(visibleDiv != ""){
			if(visibleDiv != elementid){
            document.getElementById(visibleDiv).style.display = 'none';
            }
        }
        visibleDiv = elementid;
    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</SCRIPT>

</head>
<body>
<a href="javascript:showHide('div1')>Expand/Hide div1</a>
<div id="div1" style="display:none;border:thin solid;"> 
div1 content [red]<--here is the button when clicked will have the querystring value for "show"[/red]
</div>

</body>
</html>
I wasnt sure where to check the condition of whether qstring is empty or populated...

-DNG
 
Upvote 0 Downvote
ok figured it out...i feel stupid...but any ways learned something new...

thanks

-DNG
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
193
feherke
feherke
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
138
malibu65k
malibu65k
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
318
bluemask11
bluemask11
LyndonOHRC
  • Locked
  • Question
How do I Hide/Show options elements by class
Replies
1
Views
98
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top