Collapsible divs in Repeater

[TeaAddictedGeek]

I'm attempting to make a div hidden upon an image click, and it's not working.

Here's the code:

<script language="JavaScript" type="text/javascript">
function ToggleDisplay(id)
{
// alert(id);
var elem = document.getElementById(id);
if (elem)
{
if (elem.style.display != 'block')
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
</script>

<style type="text/css">
.header { font-size: larger; font-weight: bold; cursor: hand; cursorointer;
background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden; background-color:#eeeeee;
font-family: Verdana; }
</style>

Here's the div:

<div id='div<%# DataBinder.Eval(Container.DataItem,"City").ToString() %>' class="details">


Any ideas on why this isn't working? I've tested in the JS code to make sure it was getting the right ID so that part is set.


Thanks in advance!

"The computer programmer is a creator of universes for which he alone is responsible. Universes of virtually unlimited complexity can be created in the form of computer programs."
-Joseph Weizenbaum

 

[monksnake]

Where is your call to ToggleDisplay at?

Another thing, you don't need to change visibility AND display styles.

Visibility will keep the element's space still taken up. Display will remove any space that the element took up when it was shown.

<.

 

[TeaAddictedGeek]

It's in the C# code. I have it added to the tag at runtime:

string city = ((DataRowView)e.Item.DataItem)[0].ToString();
string ToggleJS = "Javascript:ToggleDisplay('div" + city + "');";

expandBtn.Attributes.Add("onclick", ToggleJS);
collapseBtn.Attributes.Add("onclick", ToggleJS);

It shows up in the view source like this in the image tag:

onclick="Javascript:ToggleDisplay('divBoston');"

"The computer programmer is a creator of universes for which he alone is responsible. Universes of virtually unlimited complexity can be created in the form of computer programs."
-Joseph Weizenbaum

 

[monksnake]

Your code looks fine. Here is a little cleaner example.

<script type="text/javascript">
  function ToggleDisplay(id) {
     var elem = document.getElementById(id);
     if (elem) {
        if (elem.style.display != 'block') {
           elem.style.display = 'block';
        }
        else {
           elem.style.display = 'none';
        }
     }
  }
</script>

If what I wrote doesn't work, here's what I'd do to debug it.

1. Change your argument name id to something else.
2. Make sure you are actually executing the code after the
"if (elem)" by putting alerts after that line within the if block.
3. If you are getting inside the "if (elem)" block, put alerts to see what the current setting of style.display is on your div element.

If all that is fine, we are in a nether void.





<.

 

[kaht]

All spells cost (3) more to play?

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[TeaAddictedGeek]

Ok, I'm on my way to solving this! Putting alerts in each section revealed that it continues to think the display is blank no matter what it changes to. It's blank for the display when it first goes in, then sets it to "block". Another alert reveals that it is now "block". I click on it again, and it is once again blank and once again tries to set it to "block". It never gets to "none".

"The computer programmer is a creator of universes for which he alone is responsible. Universes of virtually unlimited complexity can be created in the form of computer programs."
-Joseph Weizenbaum

 

[monksnake]

Is perhaps there a CSS declaration getting overridden or another element that has the same id? That is the only way I could think that this could happen. I've actually ran into this before.

It was other elements with names or ids that were the same, I can't remember the exact reason.

<.

 

[TeaAddictedGeek]

There are no other CSS declarations save the one right on the
div tag itself. Maybe I should remove that?

No other tags the same as the div id either. It's unique to the page and even to the section.

"The computer programmer is a creator of universes for which he alone is responsible. Universes of virtually unlimited complexity can be created in the form of computer programs."
-Joseph Weizenbaum

 

[monksnake]

This is an odd problem.
I took this exact code and ran it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<script language="JavaScript" type="text/javascript">
 function ToggleDisplay(id)
 {
  // alert(id);
   var elem = document.getElementById(id);
   if (elem)
   {
     if (elem.style.display != 'block')
     {
       elem.style.display = 'block';
       elem.style.visibility = 'visible';
     }
     else
     {
       elem.style.display = 'none';
       elem.style.visibility = 'hidden';
     }
   }
 }
</script>
     
<style type="text/css">
 .header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
       background-color:#cccccc; font-family: Verdana; }
 .details { display:none; visibility:hidden; background-color:#eeeeee;
       font-family: Verdana; }
</style>  
</head>

<body>


<img onclick="Javascript:ToggleDisplay('divBoston')" src="new.gif" />
<div id="divBoston" class="details">Hello</div>
</body>
</html>

And it ran (runs) perfectly fine. I don't know hardly anything about C#, but maybe it's doing something funny.

Try this as a last ditch effort by me. On the divs that have class="details", do an inline CSS declaration like so:

<div [!]style="display:none"[/!] id="divBoston" class="details">Hello</div>

<.

 

[TeaAddictedGeek]

Yup, it must be something with the combo of C# and JS, because that style overwrites it each time. I start out with none, goes to block, and then I click again and it still says it's none. It's going with the div tag itself.

"The computer programmer is a creator of universes for which he alone is responsible. Universes of virtually unlimited complexity can be created in the form of computer programs."
-Joseph Weizenbaum