albertzak/example.html

## example.html
<!DOCTYPE html>
<html>
  <head>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>

    <script type="text/javascript">

      makeClickable = function() {
        $('div.jqcloud a').click(function(e) {
          e.preventDefault();
          var keyword = $(this).parent('span');
          togglePane(keyword);
        });
      }

      togglePane = function(keyword) {
          var title   = keyword.text();
          var content = keyword.data('content');
          var kwOffset = keyword.offset().top;
          var oldContentHeight = getContentHeight();
          var newContentHeight = getContentHeight(title, content);

          // slide back up
          $('.pane').css('visibility', 'hidden');
          $('.jqcloud span').each(function(i, el) {
            var el = $(el);
            var offset = el.offset();

            el.css('visibility', 'visible');
            if(el.hasClass('offset')) {
              el.removeClass('offset').offset({
                left: offset.left,
                top: offset.top - oldContentHeight
              });
            }

          });

          // hacky hack~
          // slide down by contentHeight
          window.keyword = keyword;
          window.setTimeout(function(){
            var keyword = window.keyword;
            var title   = keyword.text();
            var content = keyword.data('content');
            var kwOffset = keyword.offset().top;
            var oldContentHeight = getContentHeight();
            var newContentHeight = getContentHeight(title, content);
            keyword.css('visibility', 'hidden');

            $('.jqcloud span').each(function(i, el) {
              var el = $(el);
              var offset = el.offset();
              if(el.offset().top > kwOffset) {


                el.addClass('offset').offset({
                  left: offset.left,
                  top: offset.top + newContentHeight
                });
              }
            });
            $('.pane').css('visibility', 'visible').offset({
              top: kwOffset + keyword.outerHeight(),
              left: $('.pane').offset().left
            });
          }, 4);

      }

      getContentHeight = function(title, content) {
        if (title || content) {
          $('.pane .title').text(title);
          $('.pane .content').text(content);
        }
        return $('.pane').outerHeight();
      }

      $(function() {
        $("#cloud").jQCloud(transformedKeywords, {
          afterCloudRender: makeClickable
        });
      });

    </script>
  </head>
  <body>
    <!-- You should explicitly specify the dimensions of the container element -->
    <div id="cloud" style="width: 580px; height: 900px;"></div>

    <div class="pane">
      <h3 class="title"></h3>
      <div class="content"></div>
    </div>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>

	<script type="text/javascript">

	makeClickable = function() {
	$('div.jqcloud a').click(function(e) {
	e.preventDefault();
	var keyword = $(this).parent('span');
	togglePane(keyword);
	});
	}

	togglePane = function(keyword) {
	var title = keyword.text();
	var content = keyword.data('content');
	var kwOffset = keyword.offset().top;
	var oldContentHeight = getContentHeight();
	var newContentHeight = getContentHeight(title, content);

	// slide back up
	$('.pane').css('visibility', 'hidden');
	$('.jqcloud span').each(function(i, el) {
	var el = $(el);
	var offset = el.offset();

	el.css('visibility', 'visible');
	if(el.hasClass('offset')) {
	el.removeClass('offset').offset({
	left: offset.left,
	top: offset.top - oldContentHeight
	});
	}

	});

	// hacky hack~
	// slide down by contentHeight
	window.keyword = keyword;
	window.setTimeout(function(){
	var keyword = window.keyword;
	var title = keyword.text();
	var content = keyword.data('content');
	var kwOffset = keyword.offset().top;
	var oldContentHeight = getContentHeight();
	var newContentHeight = getContentHeight(title, content);
	keyword.css('visibility', 'hidden');

	$('.jqcloud span').each(function(i, el) {
	var el = $(el);
	var offset = el.offset();
	if(el.offset().top > kwOffset) {


	el.addClass('offset').offset({
	left: offset.left,
	top: offset.top + newContentHeight
	});
	}
	});
	$('.pane').css('visibility', 'visible').offset({
	top: kwOffset + keyword.outerHeight(),
	left: $('.pane').offset().left
	});
	}, 4);

	}

	getContentHeight = function(title, content) {
	if (title \|\| content) {
	$('.pane .title').text(title);
	$('.pane .content').text(content);
	}
	return $('.pane').outerHeight();
	}

	$(function() {
	$("#cloud").jQCloud(transformedKeywords, {
	afterCloudRender: makeClickable
	});
	});

	</script>
	</head>
	<body>
	<!-- You should explicitly specify the dimensions of the container element -->
	<div id="cloud" style="width: 580px; height: 900px;"></div>

	<div class="pane">
	<h3 class="title"></h3>
	<div class="content"></div>
	</div>

	</body>
	</html>