change display property to visible flicks and disappears again

Question

i have a php page that contains a table which i want to display only after clicking a link.

my problem is as follows: i have a div that is set to display="none"

<div name="details" style="display:none;">

using a javascript, i change it to inline-table, or just block, doesn't matter for the case.

function showDetails(){
        var elems = document.getElementsByName("details");
        document.getElementById("dis").innerHTML = elems.length;
        for (var i=0; i<elems.length; i++)
            elems[i].style.display = "inline-table";
    }

when i click the link that triggers this script, the div content is shown for a fraction of a second and disappears again.. here is a video of what it looks like: http://dl.dropbox.com/u/17289984/SRFile2012_9_9_22_43_58_463.avi

i've checked some 5-6 pages of google links about changing display property, and of course checked stackoverflow, but found no relevant answers...

does anyone have a clue?

thanks in advance!

P.S. here is my full code: http://codeviewer.org/view/code:299e

score 3 · Accepted Answer · answered Sep 09 '12 at 19:59

3

Remember that you are clicking an <a> tag, which is usually used for a link and they can send you to another page (that's exactly what's happening). Your href attribute is empty, so it's refreshing the page when you click it.

Try this: <a href="" onclick="showDetails();return false;">show details</a>

Notice return false;. This will cancel the default action.

answered Sep 09 '12 at 19:59

Lian

2,197
2
15
16

There are edge cases where `href=""` will get you into trouble. I normally use `href="javascript:void(0)"`, but there are differing opinions. This also takes away the need to do `return false;`, which will not help you if `showDetails()` throws an exception (the page URL will still change). See: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 – Abhi Beckert Oct 12 '12 at 22:59

score 0 · Answer 2 · answered Sep 09 '12 at 20:02

The name property is not supposed to be used like that (actually, it's deprecated and should never be used except for form fields). Change your code to:

<table class="details">

And use this to find them:

var elems = document.getElementByClassName("details");

Also, when setting the display property you should use "none" to hide an element and just an empty string to restore it to the browser default value (which can change from one browser to another):

elem.style.display = ""; // remove "none" value to make it visible.

The getElementByClassName feature doesn't exist in old browsers. A quick google search will find sample code to get it working in all browsers.

Also, @Lian is correct you should be returning false in the onclick.

sajawikio · Answer 3 · 2012-09-09T20:08:06.183

your code in the link you provided says something different from what you posted here on SO. it says in the other code that you change visibility to visible only. Visibility is LOWER PRIORITY than display. If visibility is visible but display is still none, it means that the thing will still be invisible because display is still on none. You must totally forget about visibility and change ONLY the display none to a display block.

change display property to visible flicks and disappears again

3 Answers3