Post Icon Collapse/Expand

A site I'm working on has about 50+ post icons ... the post icons are used as "tags". As you might have expected, it's a bit annoying waiting for all these icons to load.

So, I edited the posticons template to offer a collapse/expand feature. Just one template edit and the feature is visible everywhere posticons are enabled.

REPLACE posticons TEMPLATE WITH:

<if condition="$show['posticons']">
    <script type="text/javascript">
    <!--
    function swap_posticon(imgid)
    {
        var out = fetch_object("display_posticon");
        var img = fetch_object(imgid);
        if (img)
        {
            out.src = img.src;
            out.alt = img.alt;
        }
        else
        {
            out.src = "$vboptions[cleargifurl]";
            out.alt = "";
        }
    }
    // -->
    </script>
<br />
    <table class="tborder" style="background-color:#E1E4F2" cellpadding="2" cellspacing="0" border="0" width="100%">
    <thead>
        <tr>
            <td class="tcat" colspan="15" style="padding:4px">
            <div class="smallfont"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('gtposticons')"><img id="collapseimg_gtposticons" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_gtposticons].gif" alt="" border="0" /></a>
            $xvbphrase[may_choose_icon_for_message]<strong>Post Icon</strong>:  <label for="rb_iconid_0"><input type="radio" name="iconid" value="0" id="rb_iconid_0" style="margin:0px;" tabindex="1" onclick="swap_posticon(null)" $iconchecked /> $vbphrase[no_icon]</label></div></td>
        </tr>        
    </thead>
    <tbody id="collapseobj_gtposticons" style="$vbcollapse[collapseobj_gtposticons]">
        <tr>
            <td class="" style="width:0px">&nbsp;</td>
            $posticonbits
            <if condition="$show['addedspan']"><td class="" colspan="$remainingspan">&nbsp;</td></if>
        </tr>
    </tbody>
    </table>
<else />
    <input type="hidden" name="iconid" value="0" />
</if>

TIPS
- change background color (style="background-color:#E1E4F2") of table to fit your site

[lostgirl815]

Excellent! Thanks so much!

[Jasem]

Thank you, Nice share

[VikesRule]

Originally Posted by Tim Skellett

What changes do I need to make to the above script to make it automatically collapsed, so that it is only uncollapsed if people click the relevant button?

Many thanks in advance for all help.

Same question!

[compact123]

yhnaks sir, nice mod

[mmorse]

Originally Posted by VikesRule

Same question!

Change:

PHP Code:

<tbody id="collapseobj_gtposticons" style="$vbcollapse[collapseobj_gtposticons]"> 


To:

PHP Code:

<tbody id="collapseobj_gtposticons" style="display:none"> 


[lm3a.net]

that's cool

thank you,,

[vijayninel]

thanks working well in 3.8.4

[Kimberley]

Can someone tell me how to align it so its centered and not cut off to the right please

screenshot below

[snowlion]

Originally Posted by Kimberley

Can someone tell me how to align it so its centered and not cut off to the right please

screenshot below

It's centered, just decrease the width of your images

[Kimberley]

then can it be aligned left so i dont have to remake my images so smaller?