Category Toggle - No Appearance

Code:

$(function() {
   var style = document.createElement("style"),
      oCat = $('#main-content .forabg'),
      oThis = null;
 
   style.type = "text/css";
   style.innerHTML =
      'div.forabg .contract, div.forabg .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;' +
      '}' +
      'div.forabg .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);
 
   for (var i = 0, len = oCat.length; i < len; i++) {
      oThis = $(oCat[i]);
      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);
   }
});
// 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
function toggleCategory(id) {
   var obj = document.getElementById(id);
   var button = document.getElementById('b' + id);
   var toggle = obj.style.display == 'none';
   obj.style.display = toggle ? '' : 'none';
   button.className = toggle ? 'contract' : 'expand';
   my_setcookie('_' + id, toggle ? '' : '1', true);
   return false
}
initCategories();

Code didn't work to toggle category. I add it and I can toggle the category by hitting the top of the whole category bar but the + or - does ntshow on the right.

Where did you get this code?

Here:
https://help.forumotion.com/t139656-categories-hide-show

Is your forum version: phpBB 3?  Also did you use this code:  https://help.forumotion.com/t139656-categories-hide-show#950025 ?

Yes and yes.

Do you have the codes installed now?

Deleted it earlier but just added it back now.

Do you have other JavaScripts?

Yes I do.

@Forumedic,

Try using the following for phpbb3 instead.
Go to Modules > JS codes management > New

Placement : In all the pages

Code:

$(function() {
  if (_userdata.page_desktop) return;
 
  // start up variables
  var a = $('.forabg'), i = 0, j = a.length, button, list, dd;
 
  for (; i < j; i++) {
    // create and get the needed elements
    list = a[i].getElementsByTagName('UL'); // header[0] and category[1]
    button = document.createElement('A'); // toggler
    dd = document.createElement('DD'); // toggler container
   
    button.innerHTML = '';
    button.href = '#';
    button.className = 'fa fa_toggle';
    button.id = 'fa_toggle-' + i;
    list[1].id = 'fa_catg-' + i;
   
    // if the category is hidden in the cookie, we'll change the image and hide it
    if (my_getcookie('fa_catg-' + i) == 'hidden') {
      button.innerHTML = '';
      list[1].style.display = 'none';
    }
   
    // yummy toggle logic
    button.onclick = function() {
      // get the current id number and category for manipulation
      var id = this.id.replace(/.*?(\d+)/, '$1'), catg = document.getElementById('fa_catg-' + id);
     
      // if the category is hidden, we'll update the cookie and show it
      // the else statement does the opposite ;)
      if (/none/.test(catg.style.display)) {
        this.innerHTML = '';
        catg.style.display = 'block';
        my_setcookie('fa_catg-' + id, 'shown');
      } else {
        this.innerHTML = '';
        catg.style.display = 'none';
        my_setcookie('fa_catg-' + id, 'hidden');
      }

      return false;
    };
   
    dd.appendChild(button); // add the button to its container
    list[0].firstChild.firstChild.appendChild(dd); // and finally add it to the category header
  }
  'par ange tuteur';
});

FYI if you want to change the icon HTML replace the following :

Minus :

Code: 

Plus :

Code: 

They're using FontAwesome, so if you're not using that I suggest replacing the icons.

Lastly, add this to your CSS stylesheet :

Code:

a.fa_toggle {
  color:#39C;
  font-size:10px;
  background:#FFF;
  border-radius:20px;
  display:inline-block;
  line-height:20px;
  height:20px;
  width:20px;
  text-align:center;
  position:absolute;
  margin-top:-5px;
}

I added it and then CSS and it said "Error..." It also ruined my login widget thing on index that is like Forumotion. Now says "undefined"

What's the URL of the forum ?

It's in my profile, www.clashmune.forumotion.com

I'm getting an error from this script which is enabled in all the pages :

Code:

$(function() {
  var CopyrightNotice = 'Quick Quote in Quick Reply for forumotion boards. Copyright © by AvacWeb. All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';
  for (var quote = $('.i_icon_quote'), i = 0, qr = document.getElementById('quick_reply'), q, t = qr.offsetTop - 200; (q = quote[i++]) ; ) {
    $(q.parentNode).click(function(e) {
      e.preventDefault();
      var selection = (function() {
        if (window.getSelection) {
          var e = document.activeElement;
          return (e && e.tagName.toLowerCase() in {
            textarea: 1,
            input: 1
          }) ? e.value.substring(e.selectionStart, e.selectionEnd) : window.getSelection().toString()
        } else if (document.selection.createRange) {
          return (document.selection.createRange()).text || ''
        }
        return null
      })()
        , sc = $("#text_editor_textarea").sceditor("instance");
      if (selection && selection.length)
        return sc.insert('[quote]' + selection + '[/quote]');
      var div = document.createElement('div')
        , s = setInterval(function() {
        document.body.scrollTop < t ? document.body.scrollTop += 10 : clearInterval(s)
      }, 5);
      $(div).load(this.href + ' #text_editor_textarea', function() {
        sc.insert(div.getElementsByTagName('textarea')[0].value)
      })
    })
  }
});

Try enabling this script for use ONLY in the topics.

Will try this soon, haven't got to it yet.