Expand/Collapse (Toggle) Widgets

Good morning dear all,
How can I add the toggle button in my forum widgets I have add it to forum categories and I want to place it in my forum widgets. My Forum Version is phpbb2

Picture example of button:



Best Regards,
Dark-Avenger

Tutorial - https://help.forumotion.com/t78898-show-hide-widgets-script

Hi all,
SLGray I need this button of the picture for per widget, the example which you posted hides/shows all of the Widget Bar. Can we make the code like the categories toggler?

Best Regards,
Dark-Avenger

bump

Hi, I believe avacweb have a code for that.

romanzo wrote:Hi, I believe avacweb have a code for that.

romanzo,

Please refrain from posting if you're not going to provide the user with information that is helpful.

Dark-Avenger,

May I see the script you're using? I may be able to rework it for your widgets.

SethC1995 wrote:

romanzo wrote:Hi, I believe avacweb have a code for that.

romanzo,

Please refrain from posting if you're not going to provide the user with information that is helpful.

Dark-Avenger,

May I see the script you're using? I may be able to rework it for your widgets.

Good Morning SethC1995
I am using this javascript:

Code:


$(function(){
        $('#content-container .secondarytitle').parent().append('<span class="toggles"><img src="http://i57.servimg.com/u/f57/18/10/12/74/cat_mi10.png"/></span>');
        var heads = $('#content-container .secondarytitle').parent();
        for(var i=0;i<heads.length;i++){
        $(heads[i]).attr({
        id:'cat'+i,
        class: 'parent'
        });
        }
        var cookie = ReadCookie('catTog').split(',');
        for(var j=0;j<cookie.length;j++){
        $(cookie[j]).nextAll('tr').css('display','none');
        $(cookie[j]).find('.toggles').children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_ma10.png');
        }
        $('.toggles').on('click',function() {
        var g = $(this).closest('.parent').nextAll('tr').css('display');
        cookieList = ReadCookie('catTog');
        if(g == "table-row") {
        var cid= $(this).closest('.parent').attr('id');
        $(this).closest('.parent').nextAll('tr').hide();
        SetCookie("catTog",cookieList+",#"+cid,1000);
        $(this).children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_ma10.png');
        } else {
        KillCookie("catTog");
        var newCookie=[],
        a= $('.parent').nextAll('tr').filter(":hidden"),
        c = $.map(a,function(n,i){
        return "#"+$(a).closest('.parent').attr('id');
        });
        newCookie= c.join(',');
            SetCookie('catTog',newCookie, 100);
        $(this).children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_mi10.png').parent().parent().parent().children('tr').not(":eq(0)").show();
        }
        });
        });
        function SetCookie(cookieName,cookieValue,nDays) {
        var today = new Date();
        var expire = new Date();
        if (nDays===null || nDays===0) nDays=1;
        expire.setTime(today.getTime() + 3600000*24*nDays);
        document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();
        }
        function ReadCookie(cookieName) {
        var theCookie=""+document.cookie;
        var ind=theCookie.indexOf(cookieName+"=");
        if (ind===-1 || cookieName==="") return "";
        var ind1=theCookie.indexOf(";",ind);
        if (ind1==-1) ind1=theCookie.length;
        return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
        }
        function KillCookie(cookieName){SetCookie(cookieName,"",-1);}


and the necessary CSS Code.

Best Regards,
Dark-Avenger

Done

It is for right column forum widgets.

Script for modules:

Code:

   $(function(){
            $('#content-container #right td.catLeft').parent().append('<span class="modtoggles"><img src="http://i57.servimg.com/u/f57/18/10/12/74/cat_mi10.png"/></span>');
            var heads = $('#content-container #right td.catLeft').parent();
            for(var i=0;i<heads.length;i++){
            $(heads[i]).attr({
            id:'cat'+i,
            class: 'parent'
            });
            }
            var cookie = ReadCookie('catTog').split(',');
            for(var j=0;j<cookie.length;j++){
            $(cookie[j]).nextAll('tr').css('display','none');
            $(cookie[j]).find('.modtoggles').children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_ma10.png');
            }
            $('.modtoggles').on('click',function() {
            var g = $(this).closest('.parent').nextAll('tr').css('display');
            cookieList = ReadCookie('catTog');
            if(g == "table-row") {
            var cid= $(this).closest('.parent').attr('id');
            $(this).closest('.parent').nextAll('tr').hide();
            SetCookie("catTog",cookieList+",#"+cid,1000);
            $(this).children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_ma10.png');
            } else {
            KillCookie("catTog");
            var newCookie=[],
            a= $('.parent').nextAll('tr').filter(":hidden"),
            c = $.map(a,function(n,i){
            return "#"+$(a).closest('.parent').attr('id');
            });
            newCookie= c.join(',');
                SetCookie('catTog',newCookie, 100);
            $(this).children('img').attr('src','http://i57.servimg.com/u/f57/18/10/12/74/cat_mi10.png').parent().parent().parent().children('tr').not(":eq(0)").show();
            }
            });
            });
            function SetCookie(cookieName,cookieValue,nDays) {
            var today = new Date();
            var expire = new Date();
            if (nDays===null || nDays===0) nDays=1;
            expire.setTime(today.getTime() + 3600000*24*nDays);
            document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();
            }
            function ReadCookie(cookieName) {
            var theCookie=""+document.cookie;
            var ind=theCookie.indexOf(cookieName+"=");
            if (ind===-1 || cookieName==="") return "";
            var ind1=theCookie.indexOf(";",ind);
            if (ind1==-1) ind1=theCookie.length;
            return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
            }
            function KillCookie(cookieName){SetCookie(cookieName,"",-1);}

CSS for modules:

Code:

.modtoggles {
    position: absolute;
    right: 15px;
    top: 9px;
}

Thank you very much SethC1995 its works perfect

Solved!  

Best Regards,
Dark-Avenger