collapsible tables ??

**Dark-Skys99** · 07-19-2004, 03:42 PM

Anyone be able to help me with the coding for Collapsible tables... Like the ones on the right on this forum??

Thanks

-James

**Christopher** · 07-19-2004, 04:08 PM

In a nutshell, what people do is get Javascript to toggle the display CSS property of a item. display:none will hide the item, and a display of nothing (or the default) will make it display as normal.

Here's a simple rundown version:

Code:

<html>
<head>
    <title> New Document </title>
    <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>
</head>
<body>

<table width="400">
    <tbody>
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody')">Toggle</a></td></tr>
    </tbody>

    <tbody id="myTbody">
        <tr><td>Test row1</td></tr>
        <tr><td>Test row2</td></tr>
        <tr><td>Test row3</td></tr>
        <tr><td>Test row4</td></tr>
        <tr><td>Test row5</td></tr>
    </tbody>
</table>

</body>
</html>

**Dark-Skys99** · 07-19-2004, 04:31 PM

Thanks

Been wanting to do this for ages..thought it would be complicated

-James

**scottfree** · 07-21-2004, 05:43 AM

Great little script Chroder. I don´t know much about javascript but this script is so short and has an amazing effect. This is just what I need for my site.

**Republikin** · 07-21-2004, 08:14 AM

Hey Chris, how compatable is that little golden nugget?

**Mooofasa** · 07-21-2004, 09:23 AM

You can also find dhtml collapsable scripts at www.dynamicdrive.com

Mik

**Dark-Skys99** · 07-21-2004, 11:50 AM

I have also noticed on this site..That when you minimise the tables they stay like that on every page of the site..

Hows this work??

Using cookies or something??

-James

**WaHoOoO!** · 07-21-2004, 11:58 AM

Well, with the forum, I would think it has to do with sessions (being PHP).

**Mooofasa** · 07-21-2004, 12:04 PM

i have tried to view the source code of wemaster-talk, but it does not appear! Why is this? If you have the code then please submit it.

**Christopher** · 07-21-2004, 12:05 PM

Quote:

Hey Chris, how compatable is that little golden nugget?

The getItem function uses DOM's from all supporting browsers, so it should be fine. If any browser isn't supporting it, the functions return false and nothing is done (not even errors). Should work in: Mozilla, Explorer 4+, Opera 5+, Konqueror, Safari, iCab, Ice, OmniWeb. The problem is with old Netscape 4 where it uses document.layers which means you can only use <div>'s and they have to have a position with it as well.

Quote:

Using cookies or something??

Yes, whenever you click to collapse it it stores a cookie with 'id' of the object. I made something similar to this once, let me know if you want to have that functionality as well

**Dark-Skys99** · 07-21-2004, 12:14 PM

Would you be able to help me with the coding for that??

I know a little bit about cookies..But I would probally just mess it up

Thanks

-James

**Mooofasa** · 07-21-2004, 12:32 PM

I have sent Dark-Skys99 a cookie set. It should help. Although what i have sent is PHP.

Mik

**Christopher** · 07-21-2004, 12:34 PM

Ok, here you go

I love Javascript...

Code:

<html>
<head>
    <title> New Document </title>
    <script language="javascript">
    function init()
    {
        var cookie = getCookie('collapse_obj');
        if(cookie)
        {
            var values = cookie.split(',');

            for(var i = 0; i < values.length; i++)
            {
                var itm = getItem(values[i]);

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

    function makeCookie(name, value)
    {
        var cookie = name + '=' + escape(value) + ';';
        document.cookie = cookie;
    }

    function getCookie(name)
    {
        if(document.cookie == '')
            return false;

        var firstPos;
        var lastPos;
        var cookie = document.cookie;

        firstPos = cookie.indexOf(name);

        if(firstPos != -1)
        {
            firstPos += name.length + 1;
            lastPos = cookie.indexOf(';', firstPos);

            if(lastPos == -1)
                lastPos = cookie.length;

            return unescape(cookie.substring(firstPos, lastPos));
        }

        else
            return false;
    }

    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';

        ////////////////////

        cookie = getCookie('collapse_obj');
        values = new Array();
        newval = new Array();
        add    = 1;

        if(cookie)
        {
            values = cookie.split(',');

            for(var i = 0; i < values.length; i++)
            {
                if(values[i] == id)
                    add = 0;
                else
                    newval[newval.length] = values[i];
            }
        }

        if(add)
            newval[newval.length] = id;

        makeCookie('collapse_obj', newval.join(','));

        return false;
    }
    </script>
</head>
<body onload="init()">

<table width="400">
    <tbody>
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody1')">Toggle 1</a></td></tr>
    </tbody>

    <tbody id="myTbody1">
        <tr><td>Test row1</td></tr>
        <tr><td>Test row2</td></tr>
        <tr><td>Test row3</td></tr>
        <tr><td>Test row4</td></tr>
        <tr><td>Test row5</td></tr>
    </tbody>
</table>

<table width="400">
    <tbody>
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody2')">Toggle 2</a></td></tr>
    </tbody>

    <tbody id="myTbody2">
        <tr><td>Test row1</td></tr>
        <tr><td>Test row2</td></tr>
        <tr><td>Test row3</td></tr>
        <tr><td>Test row4</td></tr>
        <tr><td>Test row5</td></tr>
    </tbody>
</table>

<table width="400">
    <tbody>
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody3')">Toggle 3</a></td></tr>
    </tbody>

    <tbody id="myTbody3">
        <tr><td>Test row1</td></tr>
        <tr><td>Test row2</td></tr>
        <tr><td>Test row3</td></tr>
        <tr><td>Test row4</td></tr>
        <tr><td>Test row5</td></tr>
    </tbody>
</table>

</body>
</html>

New stuff in bold

**Mooofasa** · 07-21-2004, 12:50 PM

I love javascript too, but php is better at cookies than java.

In my oppinion anyway

**Republikin** · 07-21-2004, 01:00 PM

cookies are cookies. You can only do so much with them and they both do exactly what you can? What makes php better?

**Christopher** · 07-21-2004, 01:17 PM

Javascript and PHP grab onto the same cookies, nothing differing. At least with Javascript you can do things instantly whereas with PHP you'd need a whole new pageload.

**Mooofasa** · 07-21-2004, 01:31 PM

Very well, but i PM Dark-Skys99 with the PHP code anyway.

Mik

**Christopher** · 07-21-2004, 01:36 PM

It can't be done with PHP. With PHP you'd have to load the page over and over again on each collapse which is obviously inefficient.

PHP is a server side language, this is a client side problem and solution.

(btw, I think there is an error in my code. I'll check it out later.)