Sidebar desplegable acordeón en Blogger con jQuery [2024]

La barra lateral de Blogger suele a veces tener demasiado contenido con un poco de jQuery podemos hacer que estos elementos se "oculten" bajo un efecto acordeón para así de esta forma ganar algo de espacio, veamos un breve demo en este GIF:

1. Para implementarlo en nuestro blog iremos a tema > Editar HTML:

2. Una vez allí presionamos "Ctrl+ F" y buscaremos el siguiente código </head>.

3. Justo debajo pegaremos lo siguiente (Lo que está resaltado en naranja es la librería de jQuery si ya la tienes instalada en tu plantilla no copies esa parte):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $('.sidebar .widget-content').hide();   
    $('.sidebar h2:first').addClass('active').next().slideDown('slow');
    $('.sidebar h2').click(function() {
        if($(this).next().is(':hidden')) {           
            $('.sidebar h2').removeClass('active').next().slideUp('slow');     
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

4. Guarda los cambios y observa como ronda todo en la barra lateral de tu blog.