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

Answer 1

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.