jimfoltz/sketchup-ruby-api-sidebar.html

## sketchup-ruby-api-sidebar.html
<!DOCTYPE html>
<html>
    <head>
	<title> SketchUp Ruby API</title>
	<style>
body {
    font-family:  monospace;
    font-size: 12px;
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 0px;
    border: none;
    margin: 1px;
    width: 100%;
    text-align: left;
    outline: none;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 12px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
    div.item {
	margin: 0.5em 0 0.5em 0;
    }
    a {
	color: black;
    }
    a:link, a:visited {
	text-decoration: none;
    }
    a:hover, a:active {
	text-decoration: underline;
    }
	</style>

    </head>

    <body>

	<div id="classes">

	    <h2>Classes</h2>

	<button class="accordion">A</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/animation.html" >Animation</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/appobserver.html" >AppObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/arccurve.html" >ArcCurve</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/array.html" >Array</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/attributedictionaries.html" >AttributeDictionaries</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/attributedictionary.html" >AttributeDictionary</a></div>
	</div>


	<button class="accordion">B</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/behavior.html" >Behavior</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/boundingbox.html" >BoundingBox</a></div>
	</div>

	<button class="accordion">C</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/camera.html" >Camera</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/color.html" >Color</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/command.html" >Command</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/componentdefinition.html" >ComponentDefinition</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/componentinstance.html" >ComponentInstance</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/constructionline.html" >ConstructionLine</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/constructionpoint.html" >ConstructionPoint</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/curve.html" >Curve</a></div>
	</div>

	<button class="accordion">D</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/definitionlist.html" >DefinitionList</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/definitionobserver.html" >DefinitionObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/definitionsobserver.html" >DefinitionsObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/drawingelement.html" >Drawingelement</a></div>
	</div>

	<button class="accordion">E</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/edge.html" >Edge</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/edgeuse.html" >EdgeUse</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/entities.html" >Entities</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/entitiesobserver.html" >EntitiesObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/entity.html" >Entity</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/entityobserver.html" >EntityObserver</a></div>
	</div>

	<button class="accordion">F</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/face.html" >Face</a></div>
	    <div class="item"><a href="http://www.sketchup.com/intl/en/developer/docs/ourdoc/pages#add_frame_change_observer">Frame Change Observer</a></div>
	</div>

	<button class="accordion">G</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/geom.html" >Geom</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/group.html" >Group</a></div>
	</div>

	<button class="accordion">I</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/image.html" >Image</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/importer.html" >Importer</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/inputpoint.html" >InputPoint</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/instanceobserver.html" >InstanceObserver</a></div>
	</div>

	<button class="accordion">L</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/latlong.html" >LatLong</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/layer.html" >Layer</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/layers.html" >Layers</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/layersobserver.html" >LayersObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/length.html" >Length</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/loop.html" >Loop</a></div>
	</div>

	<button class="accordion">M</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/material.html" >Material</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/materials.html" >Materials</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/materialsobserver.html" >MaterialsObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/menu.html" >Menu</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/model.html" >Model</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/modelobserver.html" >ModelObserver</a></div>
	</div>

	<button class="accordion">N</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/numeric.html" >Numeric</a></div>
	</div>

	<button class="accordion">O</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/optionsmanager.html" >OptionsManager</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/optionsprovider.html" >OptionsProvider</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/optionsproviderobserver.html" >OptionsProviderObserver</a></div>
	</div>

	<button class="accordion">P</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/page.html" >Page</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/pages.html" >Pages</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/pickhelper.html" >PickHelper</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/point3d.html" >Point3d</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/polygonmesh.html" >PolygonMesh</a></div>
	</div>

	<button class="accordion">R</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/renderingoptions.html" >RenderingOptions</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/renderingoptionsobserver.html" >RenderingOptionsObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/sectionplane.html" >SectionPlane</a></div>
	</div>

	<button class="accordion">S</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/selection.html" >Selection</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/selectionobserver.html" >SelectionObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/set.html" >Set</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/shadowinfo.html" >ShadowInfo</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/shadowinfoobserver.html" >ShadowInfoObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/sketchup.html" >Sketchup</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/sketchupextension.html" >SketchupExtension</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/string.html" >String</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/style.html" >Style</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/styles.html" >Styles</a></div>
	</div>

	<button class="accordion">T</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/text.html" >Text</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/texture.html" >Texture</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/texturewriter.html" >TextureWriter</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/tool.html" >Tool</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/toolbar.html" >Toolbar</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/tools.html" >Tools</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/toolsobserver.html" >ToolsObserver</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/transformation.html" >Transformation</a></div>
	</div>

	<button class="accordion">U</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/ui.html" >UI</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/uvhelper.html" >UVHelper</a></div>
	</div>

	<button class="accordion">V</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/vector3d.html" >Vector3d</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/vertex.html" >Vertex</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/view.html" >View</a></div>
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/viewobserver.html" >ViewObserver</a></div>
	</div>

	<button class="accordion">W</button>
	<div class="panel">
	    <div class="item"><a href="http://code.google.com/apis/sketchup/docs/ourdoc/webdialog.html" >WebDialog</a></div>
	</div>

	</div> <!-- classes -->


	<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
	this.classList.toggle("active");
	this.nextElementSibling.classList.toggle("show");
    }
}
	</script>

    </body>
</html>