open/close dialog box with changing header text

by alano

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/themes/redmond/jquery-ui.css">
<div class="myBox">
    <h3></h3>
    <div><p>Your contents go here. There is no limit on size and you can include whatever styling you wish.</p></div>
</div>

CSS

.myBox h3.ui-accordion-header:before { content: "Open"; }
.myBox h3.ui-accordion-header.ui-state-active:before { content: "Close"; }

JavaScript

$(document).ready(function(){
    $(".myBox").accordion({
        collapsible: true,
        active: false,
        icons: {
            "header": "ui-icon-triangle-1-s",
            "headerSelected": "ui-icon-triangle-1-n"
        }
    });
});