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-04 10:11:35Z

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 4, 2013 at 10:11

answered Jul 4, 2013 at 9:58

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pawel Over a year ago

I'm not a fan of nit-picking, but id="4" may be invalid, stackoverflow.com/questions/70579/…

Derek Henderson Over a year ago

@pawel, in HTML5 the id can begin with a digit (or any character except NUL): mathiasbynens.be/notes/html5-id-class.

pawel Over a year ago

@Derek: That's why I went with may be invalid. There's no info regarding doctype.

Collectives™ on Stack Overflow

showing and hiding content using javascript properly

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related