Toogle in phpbb3

Hellow!


I know its possible to toogle the phpbb3 categories, but i dont seem to have acces to the toturials?

Hello, are you referring to the tabs for categories?

Give this code a try

Code:

 $(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("http://2img.net/i/fa/invision/exp_minus.gif") 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("http://2img.net/i/fa/invision/exp_plus.gif") 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
        */
 $(function() {
          var online = document.getElementById('memberStat');
          if (online) {
            online.innerHTML = online.innerHTML.replace(/, \d+ Hidden/, '');
          }
        });

I use that one my self on a PHPbb3 forum

Works!! its amazing ! <3

Is it possible to change the icons, or is it just via the images?

Edit: i think i found it, another question, can i use fontawesome on as icons or does it have to be a picture? (:

Edit Edit: one of the users, have problems with it, and says the toogle makes the website look like this: