How to get Category Toggle working on PHPBB3?

Hi dear Forumotioners,

I'm working on an upgrade to PHPBB3 for our official PBPBB2 forum, so I made a testforum for it which you can find Here !

I've added the Category Toggle from this tutorial: https://help.forumotion.com/t102749-category-toggle-all-forums#668821

But it doesn't work, the pictures don't show up and nothing happens as you can see there..
Does anyone have an idea how to get this in working order?

Thanks for your time in advance
Kind Regards,
Tonny Kamper

So you will be installing a phpBB 3 theme on your phpBB 2 forum which will changed it into phpBB 3?

SLGray wrote:So you will be installing a phpBB 3 theme on your phpBB 2 forum which will changed it into phpBB 3?

Yes I am considering that @SLGray thanks for your reply, it's high time our phpbb2 get's an upgrade.. I know I will have to change version to phpbb3 first with a standard version skin on our official forum before I can import the skin I made on the testforum.. I'm also testing Invision and ModernBB on 2 other testforums and I haven't decided yet which one is the best to work with.. but I want to have the skins finished first before deciding..
This phpbb3 skin I'm working on is almost to my liking, it only lacks the category toggle feature, which I need because our official forum has a lot of categories.

I've searched through the archives but found not one solution that worked or even partially worked, I found on the Dutch Helpforum this other JS and CSS for phpbb3 from january 2016, which it's quite recent I figured..
JS

Code:

$(function() {
  var oCat = $('#main-content .forabg'),
      oThis = null,
      oTemp = null,
      sEval = '';
 
  sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick=\"toggleCategory(\'c' + i + '\');\" id=\"bc' + i + '\" class=\"contract\">  </div>');" +
            "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";

  for (var i = 0, len = oCat.length; i < len; i++) {
      oThis = $(oCat[i]);
      eval(sEval);
  }
 
  initCategories();
});
// by invision.js
function initCategories() {
  var id;
  cookies = document.cookie.split('; ');
  for (var i = 0; i < cookies.length; i++) {
      if (cookies[i].charAt(0) == '_') {
        cookie = cookies[i].split('=');
        if (cookie[1] == '1') {
            id = cookie[0].substring(1);
            if (document.getElementById(id)) {
              toggleCategory(id)
            }
        }
      }
  }
}
// by invision.js, modified by JScript
function toggleCategory(id) {
  var obj = document.getElementById(id);
  var button = document.getElementById('b' + id);
  if (obj) {
      var toggle = obj.style.display == 'none';
      obj.style.display = toggle ? '' : 'none';
  } else {
      var elems = document.getElementsByClassName(id);
      for (var i = 0, len = elems.length; i < len; i++) {
        var toggle = elems[i].style.display == 'none';
        elems[i].style.display = toggle ? '' : 'none';
      }
  }
  button.className = toggle ? 'contract' : 'expand';
  my_setcookie('_' + id, toggle ? '' : '1', true);
  return false
}


CSS

Code:

.contract, .expand {
  background: url("http://2img.net/i/fa/invision/exp_minus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
  cursor: pointer;
  float: right;
}
.expand {
  background: url("http://2img.net/i/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}

But even that isn't doing the job, so I ran out of options and came here to ask for help, because javascript is one thing I haven't mastered yet

Kind regards and thanks for your time,
Tonny Kamper

How about using ModenBB?  It has the feature.

SLGray wrote:How about using ModenBB?  It has the feature.

Yeah I noticed that @SLGray but I haven't got around to editing that one yet, I didn't know how to change the looks and position of that navbar because it's in the way of our banner, so I started with the phpbb3 and invision versions first, since I recently learned from you guys here how to find the selectors of the elements by rightclicking and inspect element in the browser, that was a big revelation to me.. it made me understand so much more about css than I could ever dreamed of !

So I wondered if my phpbb2, invision and modernbb have this feature working, why isn't it working on my phpbb3, while I use the code from official tutorials ? Could this be related to the recent update to a higher version of the standard JS that's already build in into the forums, so it outdated those codes from the tutorials ? I'm just guessing here..

Kind regards,
Tonny Kamper.

The code i use is this one

Note you will have to change some icons on it thou.
 Javascript:

Code:

/**************************************************************************
 Category Toggle
 ***************************************************************************/

         
         
         
        /***
        * Application: toggle Category
        * Description: Show/hide categories!
        * Version: 0.02632015-jq1.9.1
        *        RC1 (Release candidate 1!) - Invision
        * Author: JScript - 2015/03/26 - based on Invision.js
        * This work is free. You can redistribute it and/or modify it
        * under the terms of the WTFPL, Version 2
        */
                $(function() {
          if (_userdata.page_desktop) return;
          ("JScript <jscriptbrasil at live dot com>, based on Invision.js");
          var style = document.createElement("style"),
              /* Versions:|phpBB2----------------------------------------|  |phpBB3-------------|    |PunBB-----------------|  |Invision already have it!| */
              oCat = $('#content-container .three-col td:eq(1) .forumline, #main-content .forabg, #main-content .main-head'),
              oThis = null,
              oTemp = null,
              sEval = '';
       
          style.type = "text/css";
          style.innerHTML =
              '.contract, .expand {' +
              '  background: url("https://i.servimg.com/u/f35/13/25/37/43/mine10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
              '  cursor: pointer;' +
              '  float: right;' +
'  padding-right: 55px;' +
'  padding-top: 10px;' +
'  padding-bottom: 19px;' +
              '  margin-top: -35px;' +
              '}' +
              '.expand {' +
              '  background: url("https://i.servimg.com/u/f35/13/25/37/43/add10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
              '}';
          document.getElementsByTagName("head")[0].appendChild(style);
       
          switch (oCat[0].className) {
              case 'forumline': //phpBB2
                sEval = "oTemp = oThis.find('tr').first();oTemp.addClass('title-bar');" +
                    "oTemp.find('th:last').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract" style="margin-top: -15px;">&nbsp;&nbsp;&nbsp;</div>');" +
                    "oThis.find('tr').not('.title-bar').addClass('c' + i);";
                break;
              case 'forabg': //phpBB3
                sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract">&nbsp;&nbsp;&nbsp;</div>');" +
                    "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";
                break;
              case 'main-head': //PunBB
                sEval = "oThis.find('h2').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract">&nbsp;&nbsp;&nbsp;</div>');" +
                    "oThis.next().attr('id', 'c' + i);";
                break;
          }
          for (var i = 0, len = oCat.length; i < len; i++) {
              oThis = $(oCat[i]);
              eval(sEval);
          }
       
          initCategories();
        });
        // by invision.js
        function initCategories() {
          var id;
          cookies = document.cookie.split('; ');
          for (var i = 0; i < cookies.length; i++) {
              if (cookies[i].charAt(0) == '_') {
                cookie = cookies[i].split('=');
                if (cookie[1] == '1') {
                    id = cookie[0].substring(1);
                    if (document.getElementById(id)) {
                      toggleCategory(id)
                    }
                }
              }
          }
        }
        // by invision.js, modified by JScript
        function toggleCategory(id) {
          var obj = document.getElementById(id);
          var button = document.getElementById('b' + id);
          if (obj) {
              var toggle = obj.style.display == 'none';
              obj.style.display = toggle ? '' : 'none';
          } else {
              var elems = document.getElementsByClassName(id);
              for (var i = 0, len = elems.length; i < len; i++) {
                var toggle = elems[i].style.display == 'none';
                elems[i].style.display = toggle ? '' : 'none';
              }
          }
          button.className = toggle ? 'contract' : 'expand';
          my_setcookie('_' + id, toggle ? '' : '1', true);
          return false
        }
       
        /*
        ▲ -> contract
        ▼ -> expand
        */



 CSS files:

Code:

.contract, .expand {
    background: url("https://i.servimg.com/u/f35/13/25/37/43/mine10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    cursor: pointer;
    float: right;
    padding-right: 55px;
    padding-top: 10px;
    padding-bottom: 19px;
    margin-top: -35px;
}

.expand {
    background: url("https://i.servimg.com/u/f35/13/25/37/43/add10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}


This code was gave to me by the one and only Ange Tuteur

Thank you very much for helping @APE Ange's codes are usually fantastic, so I replaced the icons for the ones I prefer to have, but nothing is showing up..
The code is ticked on Indexpage and the css code is in place, but why is it still not working?

Kind regards,
Tonny Kamper

so you have it set to In the home page only right ?

It looks to me that you have other Codes that maybe messing this one up.

try and remove all the other codes and see if that makes it work.

APE wrote:so you have it set to In the home page only right ?

It looks to me that you have other Codes that maybe messing this one up.

try and remove all the other codes and see if that makes it work.

Thank you for your assistence @APE
Yes the script is set to Homepage only (Index) I have disabled all other javascripts but it didn't made any difference, it still isn't working, so it isn't any of the other scripts that's causing the problem I assume..

Maybe it's a stupid question or a wild guess because I really have little knowledge of javascript, but could it be possible that the script used wrong selectors?

I ask this because I had to adjust 2 other scripts before by addressing some things in the Dutch language instead of the English which did the trick, I don't know why but it did.. I also dicovered while searching through thousands of posts here and trying to apply the given answers to my site, that my phpbb3 selectors often differ from the ones in the posts, I compared them through inspect element and saw that they had a different selector on my forum..

Kind regards,
Tonny Kamper

The basic Javascripts should work on all forums but if you have made a lot of change to your Templates then it could give lots of problems.

The code i have gave should work on all of our forums the only time it will not work is when you change things in your templates.

if you have a lot of change try and force your templates to default and see if it works then.

APE wrote:The basic Javascripts should work on all forums but if you have made a lot of change to your Templates then it could give lots of problems.

The code i have gave should work on all of our forums the only time it will not work is when you change things in your templates.

if you have a lot of change try and force your templates to default and see if it works then.

Thanks again @APE
I had only 2 minor changes to the index_body and the viewtopic_body templates, but I did forced the default templates and it made no diffence, I even disabled the widgets and the portal but even that made no difference, the toggle category still isn't working, not even the icons are displayed..
I even took out the category header picture to see if the toggle icons were hiding behind it, but to no avail, it's so frustrating..

Kind regards,
Tonny Kamper

Hmm really strange and the forum is phpbb3 right ?

APE wrote:Hmm really strange and the forum is phpbb3 right ?

Yes @APE in the display it says: phpBB3 (prosilver)

okay let me think about this some more it is got to be some thing we are missing LOL

APE wrote:okay let me think about this some more it is got to be some thing we are missing LOL

Okay @APE I hope you can come up with something
If you need it I can PM you login data of the founder account, so you can check it out for yourself...

Did you remove the other tutorial before adding APE's?

SLGray wrote:Did you remove the other tutorial before adding APE's?

Yes I did @SLGray I replaced it with APE's, thank you for thinking with me

Could you send me a test account bu PM?

SLGray wrote:Could you send me a test account bu PM?

Yes offcourse @SLGray do you want access to regular admin rights, or to the founders account?

Admin

SLGray wrote:Admin

PM is sent to you @SLGray , thank you

Thanks.  PM received.

APE wrote:The code i use is this one

Note you will have to change some icons on it thou.
 Javascript:

Code:

/**************************************************************************
 Category Toggle
 ***************************************************************************/

          
          
          
        /***
         * Application: toggle Category
         * Description: Show/hide categories!
         * Version: 0.02632015-jq1.9.1
         *         RC1 (Release candidate 1!) - Invision
         * Author: JScript - 2015/03/26 - based on Invision.js
         * This work is free. You can redistribute it and/or modify it
         * under the terms of the WTFPL, Version 2
         */
                $(function() {
          if (_userdata.page_desktop) return;
           ("JScript <jscriptbrasil at live dot com>, based on Invision.js");
           var style = document.createElement("style"),
              /* Versions:|phpBB2----------------------------------------|  |phpBB3-------------|    |PunBB-----------------|   |Invision already have it!| */
              oCat = $('#content-container .three-col td:eq(1) .forumline, #main-content .forabg, #main-content .main-head'),
              oThis = null,
              oTemp = null,
              sEval = '';
        
           style.type = "text/css";
           style.innerHTML =
              '.contract, .expand {' +
              '  background: url("https://i.servimg.com/u/f35/13/25/37/43/mine10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
              '  cursor: pointer;' +
              '  float: right;' +
'  padding-right: 55px;' +
'  padding-top: 10px;' +
'  padding-bottom: 19px;' +
              '  margin-top: -35px;' +
              '}' +
              '.expand {' +
              '  background: url("https://i.servimg.com/u/f35/13/25/37/43/add10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
              '}';
           document.getElementsByTagName("head")[0].appendChild(style);
        
           switch (oCat[0].className) {
              case 'forumline': //phpBB2
                 sEval = "oTemp = oThis.find('tr').first();oTemp.addClass('title-bar');" +
                    "oTemp.find('th:last').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract" style="margin-top: -15px;">&nbsp;&nbsp;&nbsp;</div>');" +
                    "oThis.find('tr').not('.title-bar').addClass('c' + i);";
                 break;
              case 'forabg': //phpBB3
                 sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract">&nbsp;&nbsp;&nbsp;</div>');" +
                    "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";
                 break;
              case 'main-head': //PunBB
                 sEval = "oThis.find('h2').append('<div onclick="toggleCategory(\\'c' + i + '\\');" id="bc' + i + '" class="contract">&nbsp;&nbsp;&nbsp;</div>');" +
                    "oThis.next().attr('id', 'c' + i);";
                 break;
           }
           for (var i = 0, len = oCat.length; i < len; i++) {
              oThis = $(oCat[i]);
              eval(sEval);
           }
        
           initCategories();
        });
        // by invision.js
        function initCategories() {
           var id;
           cookies = document.cookie.split('; ');
           for (var i = 0; i < cookies.length; i++) {
              if (cookies[i].charAt(0) == '_') {
                 cookie = cookies[i].split('=');
                 if (cookie[1] == '1') {
                    id = cookie[0].substring(1);
                    if (document.getElementById(id)) {
                       toggleCategory(id)
                    }
                 }
              }
           }
        }
        // by invision.js, modified by JScript
        function toggleCategory(id) {
           var obj = document.getElementById(id);
           var button = document.getElementById('b' + id);
           if (obj) {
              var toggle = obj.style.display == 'none';
              obj.style.display = toggle ? '' : 'none';
           } else {
              var elems = document.getElementsByClassName(id);
              for (var i = 0, len = elems.length; i < len; i++) {
                 var toggle = elems[i].style.display == 'none';
                 elems[i].style.display = toggle ? '' : 'none';
              }
           }
           button.className = toggle ? 'contract' : 'expand';
           my_setcookie('_' + id, toggle ? '' : '1', true);
           return false
        }
        
        /*
        ▲ -> contract
        ▼ -> expand
        */



 CSS files:

Code:

.contract, .expand {
    background: url("https://i.servimg.com/u/f35/13/25/37/43/mine10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
    cursor: pointer;
    float: right;
    padding-right: 55px;
    padding-top: 10px;
    padding-bottom: 19px;
    margin-top: -35px;
}

.expand {
    background: url("https://i.servimg.com/u/f35/13/25/37/43/add10.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}


This code was gave to me by the one and only Ange Tuteur

Is there not CSS in the JavaScript?

Is that a question for @APE or for me @SLGray ?
My former code from the tutorial was almost the same as this one and didn't required a seperate css code..
The one I have on my phpbb2 version did needed one..

I removed the CSS you had and replaced it with APE's.

My question was to @APE.  Also I sent the log in information to APE.  I can not locate the issue.

SLGray wrote:I removed the CSS you had and replaced it with APE's.

My question was to @APE.  Also I sent the log in information to APE.  I can not locate the issue.

Okay, thank you very much for your assistence @SLGray

Kind regards,
Tonny Kamper

SLGray wrote:Did you change the icons in the JavaScript?

I just did that @SLGray also replaced them in the css, but it still isn't showing up..

I over rid the ones in the Javascript as it was not working right on my forum the + and the - was not showing right and i needed to make a button.

I will log in your forum later after i get back from picking my wife up from the hospital.

APE wrote:I over rid the ones in the Javascript as it was not working right on my forum the + and the - was not showing right and i needed to make a button.

I will log in your forum later after i get back from picking my wife up from the hospital.

Okay, thank you in advance @APE I'll wait patiently and I hope your wife is doing okay!!

Kind regards,
Tonny Kamper

Just an update on test done by me.

Turned off templates 
Turned off CSS files 
Turned off Widgets 
Turned off JavaScripts 

Installed the full forum on my test forum and did not have a problem with it so I am really lost on to why this will not show up on the forum.