diff --git a/examples/html-element-content.html b/examples/html-element-content.html
new file mode 100644
index 0000000..69e461c
--- /dev/null
+++ b/examples/html-element-content.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>leaflet-sidebar example</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
+    <link rel="stylesheet" href="../src/L.Control.Sidebar.css" />
+    <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
+
+    <style>
+        body {
+            padding: 0;
+            margin: 0;
+        }
+
+        html, body, #map {
+            height: 100%;
+        }
+
+        .lorem {
+            font-style: italic;
+            color: #AAA;
+        }
+
+        body > #sidebar {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <a href="https://github.com/Turbo87/leaflet-sidebar/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
+    <script src="../src/L.Control.Sidebar.js"></script>
+
+    <script>
+        var map = L.map('map');
+        map.setView([51.2, 7], 9);
+
+        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+            attribution: 'Map data &copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        var html = document.createElement('div');
+        html.innerHTML = '<h1>leaflet-sidebar</h1>' +
+                        '<p>A responsive sidebar plugin for for <a href="http://leafletjs.com/">Leaflet</a>, a JS library for interactive maps.</p>';
+
+        var sidebar = L.control.sidebar(html, {
+            closeButton: true,
+            position: 'left'
+        });
+        map.addControl(sidebar);
+
+        setTimeout(function () {
+            sidebar.show();
+        }, 500);
+
+        var marker = L.marker([51.2, 7]).addTo(map).on('click', function () {
+            html.innerHTML += '<p>Click</p>';
+        });
+
+        map.on('click', function () {
+            sidebar.hide();
+        })
+
+        sidebar.on('show', function () {
+            console.log('Sidebar will be visible.');
+        });
+
+        sidebar.on('shown', function () {
+            console.log('Sidebar is visible.');
+        });
+
+        sidebar.on('hide', function () {
+            console.log('Sidebar will be hidden.');
+        });
+
+        sidebar.on('hidden', function () {
+            console.log('Sidebar is hidden.');
+        });
+
+        L.DomEvent.on(sidebar.getCloseButton(), 'click', function () {
+            console.log('Close button clicked.');
+        });
+    </script>
+</body>
+</html>
diff --git a/src/L.Control.Sidebar.js b/src/L.Control.Sidebar.js
index 4dac4f7..eefd6c1 100644
--- a/src/L.Control.Sidebar.js
+++ b/src/L.Control.Sidebar.js
@@ -1,4 +1,10 @@
-L.Control.Sidebar = L.Control.extend({
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('leaflet')) :
+    typeof define === 'function' && define.amd ? define(['leaflet'], factory) :
+    (global = global || self, global.myBundle = factory(global.L));
+}(this, function (L) { 'use strict';
+
+var Sidebar = L.Control.extend({
 
     includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
 
@@ -12,10 +18,17 @@ L.Control.Sidebar = L.Control.extend({
         L.setOptions(this, options);
 
         // Find content container
-        var content = this._contentContainer = L.DomUtil.get(placeholder);
-
+        var content;
+        if (typeof placeholder === 'string') {
+            content = L.DomUtil.get(placeholder);
+        } else if (placeholder instanceof HTMLElement) {
+            content = placeholder;
+        }
+        this._contentContainer = content;
         // Remove the content container from its original parent
-        content.parentNode.removeChild(content);
+        if (content.parentNode) {
+            content.parentNode.removeChild(content);
+        }
 
         var l = 'leaflet-';
 
@@ -192,6 +205,12 @@ L.Control.Sidebar = L.Control.extend({
     }
 });
 
+L.Control.Sidebar = Sidebar;
+
 L.control.sidebar = function (placeholder, options) {
-    return new L.Control.Sidebar(placeholder, options);
+    return new Sidebar(placeholder, options);
 };
+
+return Sidebar;
+
+}));
