Hide/Show Div on click module

Hide/Show Div on click module

HTML

<div class="js-container container">
    <div class="top gapBottom-10">
        <p class="floatLeft">Some text that is always available.</p>
        <button class="js-button js-toggleButton floatRight" type="button">Hide Menu</button>
    </div>
    
    <div class="js-bottom bottom">
        <div class="content">
           <p>
           Hello
           </p>
        </div>
       
     
    </div>
</div>

CSS

.container {
    background-color: #efefef;
    padding: 1em;
}

p { margin:0; }

.top {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    overflow: hidden;
}

.floatLeft { float: left; }

.floatRight { float: right; }

.gapBottom-10 {
    margin-bottom: 10px;
}

JavaScript

var toggleSearch = function (element) {
    this.$element = element;
    
    this.$BUTTON = '.js-button';
    this.$TOGGLEBUTTON = '.js-toggleButton';
    this.$SECTION = '.js-bottom';
    
    this.init();
};

toggleSearch.prototype.init = function () {
    console.log('fire init');
    this
        .children()
        .slide();
    
    return this;
};

toggleSearch.prototype.children = function () {
    console.log('fire children');
    this.$button = this.$element.find(this.$BUTTON);
    this.$toggleButton = this.$element.find(this.$TOGGLEBUTTON);
    this.$section = this.$element.find(this.$SECTION);
    
    return this;
};

toggleSearch.prototype.slide = function () {
    console.log('fire slide');
    var self = this;
    
    this.$button.click(function () {
        console.log(this);
        self.$section.slideToggle('fast', function () {
            console.log(self.$toggleButton.text());
            if (self.$toggleButton.text() === 'Hide Menu') {
                self.$toggleButton.text('Show Menu');               
            } else {
                self.$toggleButton.text('Hide Menu');
            }
        });
    });
    
    return this;
};

new toggleSearch( $('.js-container') );