Mostrar/Esconder Widgets

Detalhes da questão

Endereço do fórum: http://tech-gamers.forumbrasil.net/
Versão do fórum: PunBB

Descrição

Boa tarde estou com dificuldade em ocultar widgets na qual eu coloquei os 2 widgets no meu fórum e não funcionou. Configurei do jeito que está no tutorial.

Widget 1:

Código:

<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget-tech-gamers.forumbrasil.net')=='0') { my_setcookie('forum-widget-tech-gamers.forumbrasil.net','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget-tech-gamers.forumbrasil.net','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" id="forum-widget">
</div>

Widget 2:

Código:

<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget-tech-gamers.forumbrasil.net')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

Obrigado.

Você deseja ocultar todos os widgets? Ou apenas alguns específicos?
Seria em todos o fórum? ou em algumas páginas ?

Não entendi muito bem a questão. Coloque o link do tutorial.

Olá, gostaria de um ícone pra ocultar e mostrar widgets.

Olá @juninho_xd,
mude os códigos para o seguinte:

Código:

<style type="text/css">
      #expand-hidden {
          position: fixed;
          top: 40px;
          right: 10px;
          font-size: 15px;
          background: #e9ecef;
          border: 2px solid #fff;
          height: 30px;
          width: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 2px;
          box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
          z-index: 999;
          transition: all .5s;
          padding: 0 5px;
}
</style><script type="text/javascript">
 /**
 *  Mostrar/Esconder Widgets by Pedxz
 *  Created May 05, 2019 <1.0>
 *  See more: http://ajuda.forumeiros.com
*/

  (function (_) {
      'use strict';
 
      _(function () {
 
        var  _widget = _('#left, #right'),
                              _left = _('#left'),
                              _btn =  _('<div>', {
                                                  id: 'expand-hidden'
                                              }).append(
                                                  ' <span></span>'
                                              );
 
                        _btn
                              .insertBefore('body');
 
                        if(_left) {
                                      _btn.css({
                                                        'right': '0',
                                                        'left': '10px'
                                                      });
                        }
 
                      _btn.click(function() {
                          _('#content-container #content, #content-container #container ')
                                .css({
                                            'margin-left': '0',
                                            'margin-right': '0'
                                        });

 
                          _widget.toggle(function() {
                                  localStorage.setItem('visible', _widget.is(':visible'));
                          });
                    });
 
                    _widget.toggle(localStorage.getItem('visible') === 'true');
 
                    var is = _widget.is(':visible');
 
                  if(is) return;
                        _('#content-container #content, #content-container #container')
                                .css({
                                            'margin-left': '0',
                                            'margin-right': '0'
                                        });
 
      });
 
    })(jQuery);
 
 </script>

crie um widget, e cole lá o código


Cordialmente,
pedxz.

Olá, não resultou, bugou os widgets conforme a imagem:

Atualize o código em cima para:

Código:

<style type="text/css">
 #expand-hidden {
          position: fixed;
          top: 40px;
          right: 10px;
          font-size: 15px;
          background: #e9ecef;
          border: 2px solid #fff;
          height: 30px;
          width: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 2px;
          z-index: 9999;
          box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
          z-index: 999;
          transition: all .5s;
          padding: 0 5px;
}
 #expand-hidden img {
          max-width: 100%;
}
</style><script type="text/javascript">
 /**
 *  Mostrar/Esconder Widgets by Pedxz
 *  Created May 05, 2019 <1.0>
 *  See more: http://ajuda.forumeiros.com
*/

(function(_) {

    _(function() {

        var _widget = _('#content-container #left, #content-container #right'),
            _left = _('#content-container #left'),
            _btn = _('<div>', {
                id: 'expand-hidden'
            }).append(
                ' <span><img src="https://static.thenounproject.com/png/421-200.png" /></span>'
            );

        _btn
            .insertBefore('body');

        if (_left.length) {
            _btn.css({
                'right': '0',
                'left': '10px'
            });
        }

        _btn.click(function() {
            if (_widget.is(':visible')) {
                _('#content-container #content, #content-container #container')
                    .css({
                        'margin-right': '0',
                        'margin-left': '0'
                    });
            } else {
                _('#content-container #content, #content-container #container')
                    .css({
                        'margin-right': '',
                        'margin-left': ''
                    });
            }

            _widget.toggle(function() {
                localStorage.setItem('visible', _widget.is(':visible'));
            });
        });

        _widget.toggle(localStorage.getItem('visible') === 'true');

        var is = _widget.is(':visible');

        if (is) return;
        _('#content-container #content, #content-container #container')
            .css({
                'margin-right': '0',
                'margin-left': '0'
            });
     
    });
})(jQuery);
</script>

Funcionou, muito obrigado.
Podem fechar o tópico.