Class: hidden - Problem

Class: hidden - Problem

Hello,
So, here I am, Just a rookie when it comes to jQuery. I'm learning by reading books.
I am currently working with the "hidden" class. I have a title (h3) and 3 buttons. I wrote some jQuery-code to make the buttons dissapear when there is no button clicked and leave the title(h3) where it is. But the opposite happens. As soon as I load the script in my browser (doesn't matter which one), my title dissapears and the buttons stay where they are. Am I doing something wrong?
I'll paste the code down below:

jQuery:
  1. /*Part 7 Simple styleswitcher*/
  2. $('#switcher-default').addClass('selected');
        $('#switcher button').click(function(){
            var bodyClass = this.id.split('-')[1];
            $('body').removeClass().addClass(bodyClass);
            $('#switcher button').removeClass('selected');
            $(this).addClass('selected');
        });

        /*Part 8 Toggle Switcher*/
        $('#switcher h3').toggle(function(){
            $('#switcher button').addClass('hidden');
        }, function(){
            $('#switcher button').removeClass('hidden');
        });












HTML
  1. <div id="switcher" class="switcher">
               
                <h3>Style Switcher</h3>
               
                    <button id="switcher-default">
                        Default
                    </button>
               
                    <button id="switcher-narrow">
                        Narrow Column
                    </button>
                   
                    <button id="switcher-large">
                        Large Print
                    </button>
                   
            </div>















CSS:
  1. .hidden{
        display:none;
    }

I hope someone can help me solve this problem, because I really don't see what I'm doing wrong.