Accessible jQuery Open & Close

Open and close an element with JS. Open and close buttons added to DOM. When JS disabled no buttons render and content is automatically expanded for accessiblity/UX purposes.

HTML

<div class="example1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce  facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium  in, pharetra eget dolor.</p>
</div>

CSS

.button{
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px  1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
    background:#eee;
    border:0;
    color:#333;
    cursor:pointer;
    font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
    margin:0;padding:6px 4px;
    text-decoration:none;
    position:relative
}
.example1 p, .example2 p{
    border:1px solid #eee;background:#eee;
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
    width:400px;
    padding:10px;
    margin:10px 0
}

JavaScript

$(document).ready(function() {
    $('.example1').hide().before('<a href="#" id="open-example1" class="button">Open &darr;</a>');
    $('.example1').append('<a href="#" id="close-example1" class="button">Close &uarr;</a>');
    $('a#open-example1').click(function() {
          $('.example1').slideDown(1000);
        $('#open-example1').fadeOut(500);
        return false;
    });
    $('a#close-example1').click(function() {
        $('.example1').slideUp(1000);
        $('#open-example1').fadeIn(500)
        return false;
    });
});