invisible links in display:visible

Question

been lurking a while but this is my first post. Please go easy on me! :-)

I've got a faq page set up in a table with a list of 'contents' and when the 'show' buttons are clicked the body becomes visible.

When the display:none tr is changed to display:block by clicking the 'show' button it works except if I've got a <a href...> in the content of the tr. In that case the link is invisible unless I try to highlight the line.

JS looks like this -

<script> 
    function hidetr(tr) {  
        document.getElementById(tr).style.display="none"; 
    }

    function showtr(tr) {  
        document.getElementById(tr).style.display="block"; 
    } 
</script>

HTML looks like this:

<tr>
    <th>I want to search for registrations in a certain area/by a certain date/by some other criteria that the site does not 
    allow?<button onclick="showtr('faq5')">Show!</button></th>
</tr>
<tr id="faq5" style="display:none"  >
    <td>Please <a href="contactus.php" >Contact Us</a> with a summary of your requirements and purpose and if we are able to help we will do. 
    At this time the search criteria on the site are purposefully limited. </td>
    <td><button onclick="hidetr('faq5')">hide!</button>

any ideas?

update
had another look taking in to account Mr Lister's suggestion of removing the style from the row I want to hide/show - basically the link was still invisible.

I've put the page and the CSS doc on to my desktop and loaded the page from there as I thought maybe it was pulling something down from the CSS.

The link shows correctly with no changes other than the location the files are saved!

now I'm really confused

update

Sorted! well...not yet but I know what it is so should just take a few mins.

On that main page I have a couple of PHP inclusions of other docs including my navbar which has some style markups in it. There's an a {color: white;} in there which is causing this link to be white too.

I worked it out by discovering that if I changed the page to HTML rather than PHP that the color was correct so figured it must be something being included from the server side.

Thanks to all for your comments, they did help me 1/ tidy up a few bits of code 2/ pointed me in the right direction.

particular thanks to Mr Lister.

please can someone close this. It won't let me answer my own question as I'm new for 7 hours.

Well, it's not a div, it's a tr, so the display value should be `table-row`. I don't think that will solve the problem though — Mr Lister, Jul 31 '12 at 16:50
Question. What if you remove the style attribute from the `tr`, so the row is visible at the start. Is the link OK then? I mean, it works for me, see [jsFiddle](http://jsfiddle.net/qgJ2f/) (even with "block"). — Mr Lister, Jul 31 '12 at 16:58
I tried to reproduce it on different browsers and none showed your problem. maybe correct the structure of your table and see if the ill formed table tags caused the problem. Which browser are you using? — Drawyan, Jul 31 '12 at 17:05
It's the markup: http://jsfiddle.net/SO_AMK/dHEdZ/. That's all I changed. — A.M.K, Jul 31 '12 at 17:08
@A.M.K By removing the last ``, you changed it into bad HTML. Why? — Mr Lister, Jul 31 '12 at 17:14
thakns for comments guys. Updated some of the bad html (I'm pretty new) but no change. — NickW, Jul 31 '12 at 17:27
if I remove the style as Mr Lister suggested the link is still invisible! Might have given me a clue to something, I'm going to take a look — NickW, Jul 31 '12 at 17:28

score 1 · Answer 1 · answered Jul 31 '12 at 17:58

Ok, I recreated your situation and got it working using DIV inside the TR and rather hide/show that DIV, instead of the whole TR, making use of CSS class names:

CSS

div.hidden{
 display: none;
}
div.normal{
 display: block;
}

JS

function showtr(tr){
 document.getElementById(tr).className = 'normal';
}
function hidetr(tr){
 document.getElementById(tr).className = 'hidden';
}

HTML

<table>
 <tr>
  <th>I want to search for registrations in a certain area/by a certain date/by some other criteria that the site does not 
allow?<button onclick="showtr('faq5')">Show!</button></th>
</tr>
<tr>
 <td>
     <div id="faq5" class="hidden">
         Please <a href="contactus.php">Contact Us</a> with a summary of your requirements and purpose and if we are able to help we will do. At this time the search criteria on the site are purposefully limited.<button onclick="hidetr('faq5')">hide!</button></div>
  </td>
 </tr>
</table>

score 0 · Answer 2 · answered Jul 31 '12 at 16:55

0

The display value depends on the element. I've found this to be a good solution:

function showtr(tr)
{  
    document.getElementById(tr).style.display=""; 
}

This lets the browser choose a default for the element type.

Or, if you are not adverse to using jQuery, their toggle() function is pretty good:

http://api.jquery.com/toggle/

answered Jul 31 '12 at 16:55

AceCorban

2,023
1
15
15

That's a good answer, but it's not the cause of the OP's problem. The technique from the example works equally well if you put "block" or "table-row". So there's something else that goes wrong. – Mr Lister Jul 31 '12 at 17:10
Does it work equally well on all browsers? Some are more forgiving than others. – AceCorban Jul 31 '12 at 17:22
Yeah, I gave it a shot in a few browsers, and have still been unable to duplicate the error. My next thought would be the lack of some closing tags in HTML (as was brought up by other posters), but it is hard to know for sure since we are only seeing a small snippet of his entire page. Maybe his table is well-formed and he only stopped copying once he got to the button in question. Maybe an element has a duplicate id? – AceCorban Jul 31 '12 at 17:33

A.M.K · Answer 3 · 2012-07-31T17:17:28.653

0

You need to have valid markup, you were missing a few tags.

Updated code:

Demo: http://jsfiddle.net/SO_AMK/dHEdZ/

HTML:

<table>
<tr>
    <th>
        I want to search for registrations in a certain area/by a certain date/by some other criteria that the site does not allow?<button onclick="showtr('faq5')">Show!</button>
    </th>
</tr>
<tr id="faq5" style="display:none">
    <td>
        Please <a href="contactus.php">Contact Us</a> with a summary of your requirements and purpose and if we are able to help we will do. At this time the search criteria on the site are purposefully limited.
        <button onclick="hidetr('faq5')">hide!</button>
    </td>
</tr>
</table>

JavaScript:

function hidetr(tr){  
        document.getElementById(tr).style.display="none"; 
}
function showtr(tr){
        document.getElementById(tr).style.display="block"; 
}

P.S. You should try a library like jQuery, it will make your life so much easier.

edited Jul 31 '12 at 17:17

answered Jul 31 '12 at 17:02

A.M.K

16,727
4
32
64

1

Sorry, but what does "You need to have valid markup (not in HTML5, yipee!!)" mean? I hope I'm misunderstanding you. By the way, I'm sure the OP's example if just a small snippet of a larger HTML document, without missing tags. – Mr Lister Jul 31 '12 at 17:12
Possibly but it was the only problem I saw and you never know. I made a mistake the "self-closing" tags in HTML5 do _not_ include tables. – A.M.K Jul 31 '12 at 17:17
But HTML5 doesn't have any self-closing tags, only XHTML does. HTML5 can handle self-closing tags by an error recovery mechanism, but then, so can HTML4. On the other hand, you meant optional end tags rather than self-closing tags, right? – Mr Lister Jul 31 '12 at 17:22
Yes. As I said above, I made a mistake. – A.M.K Jul 31 '12 at 17:23

invisible links in display:visible

3 Answers3

CSS

JS

HTML