collapsing HTML table

[seany123]

i have this code to collapse Html tables

 

<script language="javascript">
    function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];

        return itm;
    }

    function toggleItem(id)
    {
        itm = getItem(id);

        if(!itm)
            return false;

        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';

        return false;
    }
    </script>

 

and its used with this..

 

<table width="700">
    <tbody>
        <tr><td style="background-color: #CCC" align="center"><a href="#" onclick="toggleItem('myTbody')">TABLE HEADER</td></tr>
    </tbody>
    <tbody id="myTbody">
    <tr>
	<td>TABLE CONTENT</td>
    </tr>
    <tr>
	<td>TABLE CONTENT</td>
    </tr>
    </tbody>
</table>

 

what i want to do is have it so by default its already collapsed.

 

thanks

[gristoi]

<table style="width:700px;display:none;">

[Adam]

<table style="width:700px;display:none;">

 

I think the display:none should be applied to the tbody, not the table?

[seany123]

ah yes thankyou that worked great.

 

anybody know how i can hold the values in cookie or session? so then when the page is reloaded, it will stay collapsed or expanded?

[Adam]

I forgot to mention in my last post; applying the display:none to the tbody will prevent users with JS disabled from ever seeing the table. If it's state is hidden by default, then you should use JavaScript to hide it by default, instead of CSS. That means when a user with JS disabled comes along, it's never hidden.

 

anybody know how i can hold the values in cookie or session? so then when the page is reloaded, it will stay collapsed or expanded?

 

A cookie would be more appropriate for this, since there's no PHP involved anyway. Taking into account what I said before, within the footer of your document (just before the closing body tag) add some code similar to this:

 

<script type="text/javascript">
<!--
    var tblBody = document.getElementById('myTbody');
    if (!document.cookie.match(/hide_table/) || document.cookie.match(/hide_table=1/)) {
        tblBody.style.display = 'none';
    }
-->
</script>

 

That will check if the "hide_table" cookie is not set (so default being to hide it), or if it has been set to hide it; then if ture set the display to none. When you toggle the display you need to update that cookie with 1 (when you hide it) or 0 (to show it). Then on the next page the state will have been preserved.

[seany123]

I forgot to mention in my last post; applying the display:none to the tbody will prevent users with JS disabled from ever seeing the table. If it's state is hidden by default, then you should use JavaScript to hide it by default, instead of CSS. That means when a user with JS disabled comes along, it's never hidden.

 

anybody know how i can hold the values in cookie or session? so then when the page is reloaded, it will stay collapsed or expanded?

 

A cookie would be more appropriate for this, since there's no PHP involved anyway. Taking into account what I said before, within the footer of your document (just before the closing body tag) add some code similar to this:

 

<script type="text/javascript">
<!--
    var tblBody = document.getElementById('myTbody');
    if (!document.cookie.match(/hide_table/) || document.cookie.match(/hide_table=1/)) {
        tblBody.style.display = 'none';
    }
-->
</script>

 

That will check if the "hide_table" cookie is not set (so default being to hide it), or if it has been set to hide it; then if ture set the display to none. When you toggle the display you need to update that cookie with 1 (when you hide it) or 0 (to show it). Then on the next page the state will have been preserved.

 

how does that code work with having more than collapsing table?, how can i make it so its instead hidden by default

[Adam]

That code IS hidden by default. As for multiple collapsible tables, that will require more work. You have a starting point now though, so have a bash and see how you can expand it. Think about re-usable code, and how you might store the individual states and link them to each table.

[seany123]

That code IS hidden by default. As for multiple collapsible tables, that will require more work. You have a starting point now though, so have a bash and see how you can expand it. Think about re-usable code, and how you might store the individual states and link them to each table.

 

thankyou

 

i changed the table name which is why it wasn't working, now its working, but because its not using cookies its not storing what state it was in last so when i reload it just goes back to default again hmm

[Adam]

When you toggle the display you need to update that cookie with 1 (when you hide it) or 0 (to show it). Then on the next page the state will have been preserved.

 

I mentioned about that in my first post ^^

[seany123]

When you toggle the display you need to update that cookie with 1 (when you hide it) or 0 (to show it). Then on the next page the state will have been preserved.

 

I mentioned about that in my first post ^^

 

well too confused, ill just leave it as is, thankyou.

[seany123]

Actually does it require setting the cookies via php or js?

[Adam]

JavaScript is perfectly capable of setting cookies. It's a little more complicated as you don't have setcookie, but there's JS equivalents out there.

[seany123]

No, im only familiar with cookies in PHP, and even then im too noobie with javascript to even workout what that cookie name needs to be for it all to work.