Toggle Visible Problem in Javascript

That was what i first thought too but it is definitely only called once. I added an alert to the function - it doesn't display and the hidden div no longer flashes. So I commented out evreything except the alert but it does not show. What's going on?

Your small snippet of code you have provided works fine.  There is probably something else going on that we can't see.  Can you post the code you used with the alert box?

It's not the alert. I got that to work (just one of them dumb typos). The function fires only once, table is visible while alert is open then disappears.

From what I can tell there are no obvious problems with the code you have provided so far.

is your layout this way?

<script type="text/javascript">
function toggleBanner()
{
	var div = document.getElementById('Data');
	var i = document.getElementById('imgToggle'); 
	if(div.style.visibility == 'hidden')
	{ 
		div.style.visibility = 'visible';
		i.src = 'Images/minus.gif';
		i.alt = 'minus';
	} 
	else 
	{
		div.style.visibility = 'hidden';
		i.src = 'Images/plus.gif';
		i.alt = 'plus';
	}
}
</script>
<img id="imgToggle" src="Images/plus.gif" alt="plus" onclick="toggleBanner();"></img>
<div id="Data" style="visibility:hidden;">
	My Div
</div>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

More or less

    <div>
        <table>
        <tr><td>
            <img id="imgToggle" src="Images/plus.gif" alt="plus" onclick="toggleBanner();"</td>
        
        <td>Click</td>
        </tr></table>
    </div>
    <div id="Data"  style="display: none; visibility: hidden">
        Table Goes Here
    </div>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

ok,
use either display or visibility property.,

refer to my previous post
you have your div this way
<div id="Data"  style="visibility: hidden">
       Table Goes Here
</div>
it will work.

let me know.

As JimU has already commented, your snippet of code seems to work properly as given.

However, the behavior you describe (the image flashing briefly on then off) may be a result of your setting the 'Data' div display style to an empty string in line 8. Are you sure that, in the original program (not the copy that has been pasted into the code snippet box of this page), a space or even a non-printing character has not crept in somehow?

While kadaba recommends using either display or visibility, you may want to use both. For example, you may want to use the display property to enable your 'Data' div to expand or collapse at the same time its visibility is toggled.

But you should avoid setting the display property to an empty string. This may produce different effects in different browsers. Instead, use the specific display style you need for the 'Data' div when you make it visible, for example, 'block', 'inline', 'inline-block', etc.

So try changing the assignment of line 8 to "div.style.display = 'block';" instead of using an empty string.

Hope this helps.

Well, actually I had tried that too. I used 'block' instead of the empty string, again without success. Unfortunately I have other problems now and can't even get the app to open a browser. (Probably should post this one in a new question)

did you try my suggestion,
you could either use display or visibility property
what exactly did you try to do? are you sure we cannot help you out further?

also you could split the points yourself...

http://www.experts-exchange.com/help.jsp#hs=8&hi=100

yes I did. but until I can get the app to run again there's nothing I can do. If you guys want to wait that's okay by me. I just wanted to give you something for your efforts so far.

oh alright not a problem. let us know once you are up and running. you could close this question by assigning the points yourself.

You could open a new related question once you are ready, so that we will know you have posted a new question linked to this one.

Thanks for appreciating the efforts put in here.

Good day.

ok, it's back up.

the div code is:
<div id="schoolData" style="display: none; visibility: hidden">
I've attached the entire function.

<script type="text/javascript">
	function toggleBanner(){
	alert("start");
        var div = document.getElementById('schoolData');
			var i = document.getElementById('imgToggle');
			if(div.style.visibility == 'hidden'){
				div.style.visibility = 'visible';
				div.style.display = 'block';
				i.src = 'Images/minus.gif';
				t.value=1
				alert("Set to vis"); 
			} 
			else {
				div.style.visibility = 'hidden';
				div.style.display = 'none';
				i.src = 'Images/plus.gif';
				alert("set to Hide");
               
			}
		alert("End");
		} 
		
</script>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

well, i just tried your suggestion i.e. just toggling the display property but still no go. I guess the "something else" is what we are trying to find out.

fine, can you post the complete source code?

Kadaba et al - OK I got it to work using your example. the problem, which was entirely my fault, was that the code I sent you was not the code in the file. I had copied from a previous version unwittingly where I had used an asp image button instead of the image: i.e
 <asp:ImageButton ID="imgToggle" runat="server" ImageUrl="images/plus.gif" OnClientClick="toggleBanner('schoolData')"  />.
Once i switched to <img....> everything worked.
So sorry for the run around. But of course this begs the question why it didn't work using the image button doesn't it?

asp not my area of work right now...
but yes should have worked... since you are using onClientClick that would execute on the client
but since its runat server which could possibly generate an ID different from what is there...
I mean  ID could have been different when rendered .. which I am not sure
just a thought though.

toggleBanner('schoolData',this.id) -- try this way and check if this would solve(re write the function a lil bit)

I hope this might give you an insight to it.

If I understood your suggestion correctly I should pass both the div and the image button to the function, and  re-write the function to accept 2 arguments. (see code)
 
Same result. The image button causes the table to show briefly, the img works.

I think I might re-submit this question in with an asp tag.

Here;s the function:
<script type="text/javascript">
		function toggleBanner(id,btn){ 
            var div = document.getElementById(id);
			var i = document.getElementById(btn);
			if(div.style.display == 'none') {
						
				div.style.visibility = 'visible';
				div.style.display = 'block';
				i.src = 'images/minus.gif';
	            i.alt="-";
			} 
			else {
				div.style.visibility = 'hidden';
				div.style.display = 'none';
				i.src = 'images/plus.gif';
                i.alt = '+';
			}
		}
</script> 
And the image button: 
<asp:ImageButton ID="imgToggle" runat="server" ImageUrl="images/plus.gif" OnClientClick="toggleBanner('schoolData','imgToggle')" CssClass="images1" Height="11px" Width="11px" />

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

yes instead of
OnClientClick="toggleBanner('schoolData','imgToggle')"
try this way
OnClientClick="toggleBanner('schoolData',this.id)"

I am not sure what kind of Id gets generated.

Yes please feel free to post a new question with asp.net zone.

Sorry I haven't been of much help.

Sorry no go there either. I think I'll close this now, assign the points and reopen the question under ASP. Thanks for your help.

Make sure it is ASP.NET not ASP!  They are different.

bol

By the way ... if you did not get an answer then the appropriate option to close this is delete.  You can do that by using the Delete Question button/link at the top of the question.  If the answer wasn't complete but did help or work partially then accept the relevant comments.

bol

provided a solution to the problem by using a different object but still need to figure out why thwe orioginal didn't work.