Toggle Widgets + Toggle Categories

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Opera
Who the problem concerns : Yourself
Forum link : testforumxwa.forumotion.com

Description of problem

Found this old thread https://help.forumotion.com/t128240-expand-collapse-toggle-widgets

I want the same thing that person wanted, to be able to toggle widgets individually. For whatever reason, that's not working for me. I have the collapse all tutorial code activated as well. Could that be my problem?

I don't know anything about javascript so please dumb down all answers. Thank you.

Thanks for any reply.

EDIT: I've just checked the toggle categories javascript and that doesn't show up for normal members. It does show up for admins, though. The toggle widgets code just doesn't show up at all.

Hi @EEYEN3,

From what I can tell, the script appears working. You just need a bit of CSS which will help contain the button. Add this to your stylesheet :

Code:

.forumline { position:relative; }

Thanks! Can you help me with the category toggle also? It works for my admin account but not for my normal user account.

Hmm.. I'm not sure why that would be unless you have a script that's only executed for member's which is throwing an error. Just to make sure, you added the following script with placement in the homepage, correct ?

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);}

You'll most likely need a bit of CSS too :

Code:

.toggles {
  position:absolute;
  right:10px;
  top:5px;
}

Thank you! Both problems fixed.

This topic is solved.