showing and hiding content using javascript properly

Question

Have a table with information about pages created on a site. This table shows all the top pages. All top pages with sub pages would have a checkbox beside the page name which can be ticked to view or unveil all the sub pages and if unticked, all the sub pages becomes hidden.

It's working but has limitation and also not precisely the way i wish.

1st challenge is:

The javascript controlling the checkbox when ticked has a limit. The function is expected to get the unique ID of the tag containing the sub pages for each top page and this should be handled by just one function. Rather i could only get it done by creating 10 functions to handle 10 unique IDs which thereby limits the performance. i.e if the unique ID of a specific top page is not in the javascript functions created, it wont work. (As shown in the example)

2nd challenge is:

I would prefer to use an hyperlink instead of the input checkbox used to indicate that a top page has subpages.

I tried working with an hyperlink but it just would not work, so i had to just settle for the checkbox.

Here is the code (IDs are being called dynamically via php) :

<div style="width:400px; margin:0px auto;">
<table class="table table-bordered">
    <thead>
        <tr>
            <th width="40%">Page Title</th>
            <th>Page Content</th>
        </tr>
    </thead>
    <tbody>
     <?php

 $sn = 4;
 $sn2 = 11;
 $sn3 = 16;

 ?>

 <tr><td><input type="checkbox" id="boxChecked<?php echo $sn; ?>" onclick="boxChecked<?php echo $sn; ?>(this.checked);" /> Page A</td><td>Content</td></tr>

 <tbody id="rowChk<?php echo $sn; ?>" style="display:none;" class="subpages_bg">

 <tr><td>Page A1</td><td>Content</td></tr>
 <tr><td>Page A2</td><td>Content</td></tr>
 <tr><td>Page A3</td><td>Content</td></tr>
 <tr><td>Page A4</td><td>Content</td></tr>

    </tbody>

 <tr><td>Page B</td><td>Content</td></tr>
 <tr><td>Page C</td><td>Content</td></tr>

  <tr><td><input type="checkbox" id="boxChecked<?php echo $sn2; ?>" onclick="boxChecked<?php echo $sn2; ?>(this.checked);" /> Page D</td><td>Content</td></tr>

 <tbody id="rowChk<?php echo $sn2; ?>" style="display:none;" class="subpages_bg">

 <tr><td>Page D1</td><td>Content</td></tr>
 <tr><td>Page D2</td><td>Content</td></tr>
 <tr><td>Page D3</td><td>Content</td></tr>
 <tr><td>Page D4</td><td>Content</td></tr>

    </tbody>

 <tr><td>Page E</td><td>Content</td></tr>


  <tr><td><input type="checkbox" id="boxChecked<?php echo $sn3; ?>" onclick="boxChecked<?php echo $sn3; ?>(this.checked);" /> Page F</td><td>Content</td></tr>

 <tbody id="rowChk<?php echo $sn3; ?>" style="display:none;" class="subpages_bg">

 <tr><td>Page F1</td><td>Content</td></tr>
 <tr><td>Page F2</td><td>Content</td></tr>
 <tr><td>Page F3</td><td>Content</td></tr>
 <tr><td>Page F4</td><td>Content</td></tr>

    </tbody>

    </tbody>
</table>


</div>

Here is the jsfiddle demo

Please note: the different between the code above and the demo on jsfiddle is just the php being used in the code above.

Would be pleased getting help with this.

Sergio · Accepted Answer · 2013-07-04T10:11:35.227

1

You could pass a parameter in your onclick and then you need only once the function:

FIDDLE

<tr><td onclick="check('tab4');" > Page A</td><td>Content</td></tr>

 <tbody id="tab4" style="display:none;" class="subpages_bg">

 <tr><td>Page A1</td><td>Content</td></tr>
 <tr><td>Page A2</td><td>Content</td></tr>
 <tr><td>Page A3</td><td>Content</td></tr>
 <tr><td>Page A4</td><td>Content</td></tr>

    </tbody>

And you would only need 1 function:

function check(id) {
    if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "";
    } else {
        document.getElementById(id).style.display = "none";
    }
}

edited Jul 04 '13 at 10:11

answered Jul 04 '13 at 09:58

Sergio

28,539
11
85
132

I'm not a fan of nit-picking, but `id="4"` may be invalid, http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – pawel Jul 04 '13 at 10:03
@pawel, in HTML5 the id can begin with a digit (or any character except NUL): http://mathiasbynens.be/notes/html5-id-class. – Derek Henderson Jul 04 '13 at 10:26
@Derek: That's why I went with *may* be invalid. There's no info regarding doctype. – pawel Jul 04 '13 at 11:35

showing and hiding content using javascript properly

1 Answers1