JSFiddle - React, Tailwind, and code Playground

by cuhuak

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
 <div class="organization">
     <div data-toggle="collapse" data-target="#org" style="line-height: 40px; vertical-align: middle; cursor: pointer;">
         <img class="pull-left" style="border: 1px solid #aaa; margin-right: 10px; padding: 2px; border-radius: 3px; display: inline-block; vertical-align: text-top" alt="Default logo" src="http://placehold.it/32x32">
          <span>Click me ogranization</span>
    </div>
 
    <div id="org" class="collapse">
        <ul class="nav nav-list">
            <li>
                <a href="#"><i class="icon-book"></i> Branch 1</a>
            </li>
            <li>
                <a href="#"><i class="icon-pencil"></i> Branch 2</a>
            </li>
            <li>
                <a href="#"><i class="icon-pencil"></i> Branch 3</a>
            </li>
            <li class="dropdown" id="menu1" style="vertical-align: middle;">
                <a href="#"><i class="icon-pencil"></i> Branch 4</a>
                <a style="width: 14px; height: 14px; vertical-align: middle; text-align: center; position:absolute; right: 0; top: 50%; cursor: pointer; margin-top: -7px;" class="dropdown-toggle: padding: 0; margin: 0;" data-toggle="dropdown" href="#menu1"><i class="icon-cog"></i></a>
                
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
          </li>
      </ul>
   ...

CSS

.organization {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin: 20px;
    padding: 20px;
}
.collapse.in.out {
    overflow: hidden;
}
.collapse.in {
    overflow: visible;
}
.dropdown-menu {
    top: 100%;
    left: 100%;
}

JavaScript

/* =============================================================
 * bootstrap-collapse.js v2.0.1
 * http://twitter.github.com/bootstrap/javascript.html#collapse
 * =============================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============================================================ */

!function ($) {

    "use strict"

    var Collapse = function (element, options) {
        this.$element = $(element)
        this.options = $.extend({}, $.fn.collapse.defaults, options)

        if (this.options["parent"]) {
            this.$parent = $(this.options["parent"])
        }

        this.options.toggle && this.toggle()
    }

    Collapse.prototype = {

        constructor: Collapse

  , dimension: function () {
      var hasWidth = this.$element.hasClass('width')
      return hasWidth ? 'width' : 'height'
  }

  , show: function () {
      var dimension = this.dimension()
        , scroll = $.camelCase(['scroll', dimension].join('-'))
        , actives = this.$parent && this.$parent.find('.in')
        , hasData

      if (actives && actives.length) {
          hasData = actives.data('collapse')
          actives.collapse('hide')
          hasData || actives.data('collapse', null)
      }

      this.$element[dimension](0)
      this.transition('addClass', 'show', 'shown')
      this.$element[dimension](this.$element[0][scroll])
      this.$element.removeClass('out')

  }

  , hide:...