put a creative title here

adding the class "draggable" to a div lets you move it around by the class "window_top".

add a unique div id to your window to control the width, height, and position of each window. search for /*----- window section size and initial locations -----*/ in the css to see how i do this.

you can let the height of the window automatically expand to its contents, or you can specify the height.

in the head section of your code, remember to add


<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/3.0.0/draggabilly.pkgd.min.js"></script>

keep the script that adds the dragging and collapsing right above </body>, don't move it to the head section.

i use variables to control the all the colors plus padding, border, shadow, and fonts. these appear at the top of the css so you should be able to customize the look of the windows without needing to dig too deep into the code. of course feel free to mess with the code as much as you want.

i prefer to keep the css for my windows in a separate .css file, although i've kept everything to one page to make downloading this demo easier. if you do too feel free to copy everything inside of <style>...</style> to a new file, save it as something like window.css, then add <link rel="stylesheet" href="window.css" type="text/css"> inside of your head tag.

some super long ass title to show that it'll clip if it gets too long, so if you forget to keep it short it won't mess up the positioning of the controls on the upper right
this window shows you how you can replace the minimize and maximize buttons with images. search for #blue in the css to see how this window was styled.
terminal
> you can give individual windows unique styles. this one uses <li> elements to create the buttons and moves them to the left side. for this mac terminal style window, search for #mac in the css.