[Projeto] Botão para ocultar e mostrar Widgets

Olá amigos, tudo bem?

Este é um código que estive desenvolvendo, cujo efeito já é existente de um outro código que foi desenvolvido por outra pessoa, porém o código já existente não é lá tão "agradável"...
Gostaria da opinião de vocês, se acham que assim já está bom, ou se algo deve ser alterado.

Código:

var jDoc = jQuery(document);
jDoc.ready(function() {
jQuery('head').append(
'<style>' +
'#outer-wrapper {' +
'  position: relative;' +
'}' +
'.sidebar_col {' +
'  padding: 3px 7px;' +
'  background-color: rgba(0, 0, 0, 0.7);' +
'  color: white;' +
'  -webkit-border-radius: 4px;' +
'  -moz-border-radius: 4px;' +
'  border-radius: 4px;' +
'  position: absolute;' +
'  top: -10px;' +
'  -webkit-transition: all 0.4s ease-in-out;' +
'  -moz-transition: all 0.4s ease-in-out;' +
'  cursor: pointer;' +
'}' +
'#right + .sidebar_col {' +
'  right: -13px;' +
'}' +
'#left + .sidebar_col {' +
'  left: -13px;' +
'}' +
'.sidebar_hide {' +
'  opacity: 0;' +
'}' +
'#right:hover + .sidebar_hide, #left:hover + .sidebar_hide, .sidebar_show {' +
'  opacity: 0.5;' +
'}' +
'.sidebar_hide:hover, .sidebar_show:hover {' +
'  opacity: 1;' +
'}' +
'.sidebar_hide:after {' +
'  content: "x";' +
'}' +
'#right + .sidebar_show:after {' +
'  content: "«";' +
'}' +
'#left + .sidebar_show:after {' +
'  content: "»";' +
'}' +
'</style>'
);

var jSidebar = jQuery('#right, #left');

jSidebar.after(
'<span class="sidebar_hide sidebar_col"></span>'
);

jQuery('.sidebar_col').each(function() {  
     var jThis = jQuery(this);
     jThis.attr('id','col_' + jThis.prev().attr('id'));
});

var jContent = jQuery('#content');
var jRight = jQuery('#col_right');
var jLeft = jQuery('#col_left');

if(jQuery.cookie('sidebarRight') == 'fechado') {
   jRight.addClass('sidebar_show').removeClass('sidebar_hide').prev().hide();
   jContent.css('width','100%');
}
if(jQuery.cookie('sidebarLeft') == 'fechado') {
   jLeft.addClass('sidebar_show').removeClass('sidebar_hide').prev().hide();
}

jDoc.on('click','.sidebar_hide', function() {
        if(jQuery(this).attr('id') == 'col_right') {
           jRight.removeClass('sidebar_hide').addClass('sidebar_show').prev().fadeOut('500');
           jContent.delay('500').animate({width: '100%'}, '400');
           jQuery.cookie('sidebarRight', 'fechado', { expires: 365 });
        } else {
           jLeft.removeClass('sidebar_hide').addClass('sidebar_show').prev().fadeOut('500');
           jQuery.cookie('sidebarLeft', 'fechado', { expires: 365 });
        }
});

jDoc.on('click','.sidebar_show', function() {
        if(jQuery(this).attr('id') == 'col_right') {
           jRight.removeClass('sidebar_show').addClass('sidebar_hide').prev().delay('400').fadeIn('500');
           jContent.animate({width: jContent.width() - jRight.prev().width()-10}, '400');
           jQuery.cookie('sidebarRight', 'aberto', { expires: 365 });
        } else {
           jLeft.removeClass('sidebar_show').addClass('sidebar_hide').prev().delay('400').fadeIn('500');
           jQuery.cookie('sidebarLeft", 'aberto', { expires: 365 });
        }
});
});

Testem em seus fóruns aplicando o investimento em todas as páginas.


Até mais!

@Daemon, tem como colocar essa na estrutura pra divulgarmos-ei? Eu esqueci dele lá...

O tutorial já está pronto para ser postado!

Código dando conflito, testei e não funcionou.

Holkis escreveu:Código dando conflito, testei e não funcionou.

Poderia me enviar uma screenshot do console do navegador enquanto o código está ativo?

Olá,

Veja:

Agora:

Não está funcionando.

Atenciosamente.

Holkis escreveu:Olá,

Veja:

Agora:

Não está funcionando.

Atenciosamente.

Quem tiver problemas semelhantes favor se dirigir a área de suporte.

Atenciosamente.