jQuery Smooth Toggle with Changing Show/Hide button

This is a code for jQuery Toggle tool which can Show or Hide the specified text in a div and changed the text in the button accordingly with a smooth transition effect. First there is HTML code then the Script code which must be added with jQuery,js. Working can be seen on DEMO page.

<section class="round-border">
            <div>
                <button href="#collapse1" class="nav-toggle">Show</button>
            </div>
            <div id="collapse1" style="display:none">
                <p>Bla bla bla bla</p>
            </div>
        </section>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
                $('.nav-toggle').click(function(){
                    //get collapse content selector
                    var collapse_content_selector = $(this).attr('href');                    
                    
                    //make the collapse content to be shown or hide
                    var toggle_switch = $(this);
                    $(collapse_content_selector).toggle(function(){
                        if($(this).css('display')=='none'){
                            toggle_switch.html('Show');//change the button label to be 'Show'
                        }else{
                            toggle_switch.html('Hide');//change the button label to be 'Hide'
                        }
                    });
                });
                
            });   
</script>

DEMO