Collapsible divs in Repeater

[TeaAddictedGeek]

I've tried solving this via a combo of Javascript, CSS, and ASP.NET as per the 4GuysFromRolla site, but it's not working for me. Maybe someone here knows of a better solution.

I have a Repeater with lots of details for each header. There's an imagebutton next to each heading that should toggle the div to visible versus not visible.

Anyone tried anything like this and gotten it to work? I've tried to see if I can get it to be taken care of at the backend, but .NET complains at me for trying to dynamically generate the div ID.


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

 

[jbenson001]

Use CSS and set it to Display:None or Display:Block

 

[TeaAddictedGeek]

But how would I toggle that? This is what I have so far and it's not working:

<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">

I'm adding the Javascript tag on the C# end, and it's there when I do a view source.

"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

 

[jbenson001]

Try asking in the javascript forum: forum216

 

[TeaAddictedGeek]

Ok, I tried that. JS is fine--apparently the ASP.NET code is overriding what the Javascript is trying to do.

"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

 

[jbenson001]

How are you adding the js to the page?

 

[TeaAddictedGeek]

The tag itself is being added in the backend. It does work and I've outputting the results in alert tags. The style as assigned to the div keeps getting reset back to the default however.

"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

 

[jbenson001]

backend? throught the db or and Attributes.Add()
we need to see the code in order to help.

 

[TeaAddictedGeek]

Oh that's right, you can't see my screen from here, can you?

string itemType = e.Item.ItemType.ToString();

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

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

I did a view source and it's there and the function does indeed work. Here's what the div code looks like:

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

"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

 

[TeaAddictedGeek]

Does anyone know how to prevent the div tag's code from overriding the Javascript in the above example?

"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