Backbone: Toggle methods on some event

In answer to http://stackoverflow.com/questions/22030117

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>    

<script type="text/tpl" id="view-tpl">
    <div class="tile">
        <button class="btn" id="share-btn1">Click Me</button>
        <div class="share-tools1" style="display: none;">
            here are the share tools...
        </div>    
    </div>
</script>

JavaScript

var View = Backbone.View.extend({
    template: _.template($('#view-tpl').html()),
    
    render: function () {
        this.$el.append(this.template());
        return this;
    },
    
    // Make it clear that these are the same element.
    // Ensure they will not both fire by making them exclusive.
    events: {
        'mousedown .btn:not(.hide)' : 'show',
        'mousedown .btn.hide' : 'hide'
    },
    
    'show' : function (e) {
        console.log('show');
        var $e = $(e.currentTarget);
        $e.closest('.tile').find('.share-tools1').fadeIn('fast', function () {
            $e.addClass('hide');
        });
        $e.find('.button-copy').closest('.button-copy').html('close');
    },
    
    'hide' : function (e) {
        console.log('hide');
        var $e = $(e.currentTarget);
        $e.closest('.tile').find('.share-tools1').fadeOut('fast', function () {
            $e.removeClass('hide');
        });
        $e.find('.button-copy').closest('.button-copy').html('share');
    }
});

var view = new View();
$('body').append(view.render().el);