Categoria retrátil personalizada

Código:

/* <<<Phpbb3 using - Shiftactif codeasy>>> */
$(function(){

    $(function(){
   
        /* salvar o estado para a próxima vez ou não (false) */
        save= true; 

        /* html permitido nos títulos de guia (false) ou não */
        safe= true;
       
        /* tipo (slideDown, fadeIn, show) e duração (ms) do início */
        show= ["slideDown",500];
       
        /* idem ( types : slideUp, fadeOut, hide ) mais de disparition */
        hide= ["slideUp",500];
               
        /* evento nas guias (mouseenter, clique, ...)*/
        event= "click";
       
        /* adicionar tags e escolha o padrão */
        defaut= add("Todas");
        add("Categoria 01",[1,2]);
        add("Categoria 02",[2,4]);
        add("Esconder tudo",5);

        /* ajout de l'emplacement des tabs */
        conteneur_tabs("before",".cat-table:first");
       
    });
   
    $(function(){var a;if(save&&window.localStorage&&(a=localStorage.getItem("tabs"))&&(a=u(a)))defaut=a;$(".cat-table").filter(function(a){return!z(defaut,a)}).hide();for(a=0;a<v.length;a++)$(".cat-tabs").append('<div class="ct-item'+(v[a]==defaut?" ct-active":"")+'">'+(safe?v[a][0].replace(/&/g,"&amp;").replace(/</g,"<").replace(/>/g,">").replace(/"/g,"""):v[a][0])+"</div>");$(".cat-tabs").on(event,".ct-item",function(){$(".cat-tabs .ct-active").removeClass("ct-active");var a=$(this).parent().children().index(this);
$(".cat-tabs").each(function(){$(this).children().eq(a).addClass("ct-active")});var c=v[a];$(".cat-table").not($(".cat-table").filter(function(a){return z(c,a)})[show[0]](show[1]))[hide[0]](hide[1]);save&&window.localStorage&&localStorage.setItem("tabs",JSON.stringify(c))})});
var hide,show,save,safe,event,timeslide,defaut,v=[],w=["th.secondarytitle","div.table-title h2","div.page-title h2","div.maintitle h2"],x=["table","div.forabg","div.main-head","div.borderwrap"],y=[null,null,"div.main-content",null],ver=function(){return $("#phpbb").length?1:$("#pun-intro").length?2:$("#ipbwrapper").length?3:0},add=function(a,b){if(1==arguments.length)if("number"==typeof a)if(0<=a&&$(w[ver()]).length>=a+1)a=$(w[ver()]).eq(b=a).text();else return;else if("string"==typeof a)for(var b=
[],c=0;c<$(w[ver()]).length;c++)b.push(c);v.push([a,"number"==typeof b?[b]:b]);return v[v.length-1]},u=function(a){for(var b=0;b<v.length;b++)if(JSON.stringify(v[b])==a)return v[b];return!1},conteneur_tabs=function(a,b){$(b)[a]('<div class="cat-tabs"></div>')},z=function(a,b){for(var c=0;c<a[1].length;c++)if(a[1][c]==b)return!0;return!1};$(w[ver()]).closest(x[ver()]).each(function(){$(this).add(y[ver()]).wrapAll('<div class="cat-table" />')});
   
});

        /* <<<Phpbb3 using - Shiftactif codeasy>>> */

Código:

.cat-tabs {
  text-align: center;
  margin: 10px auto;
}
.ct-item {
  display: inline;
  padding: 5px;
  margin: 5px;
  background: #D3EFF6;
  color: #999999;
  font-weight: bold;
}
.ct-active {
  color: #FFF;
  background: #D7EEB7;
}

Skyline escreveu:Olá,
Veja se este tópico lhe ajuda com a sua duvida: https://shift.forumactif.com/t265-

Cordialmente
Skyline