Show Hide with jQuery UI Sortable

by Stéphane François

HTML

<div class="sortable">
  <div class="column">
      <div class="portlet">
          <div class="portlet-header handle">Feeds</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
      <div class="portlet">
          <div class="portlet-header">News</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
  </div>
  <div class="column">
      <div class="portlet">
          <div class="portlet-header">Shopping</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
  </div>
  <div class="column">
      <div class="portlet">
          <div class="portlet-header">Links</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
      <div class="portlet">
          <div class="portlet-header">Images</div>
          <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elitLorem ipsum dolor sit amet, consectetuer adipiscing elitLorem ipsum dolor sit amet, consectetuer adipiscing elitLorem ipsum dolor sit amet, consectetuer adipiscing elitLorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
  </div>
</div>

CSS

body {
    min-width: 520px;
}
.column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
}
.portlet {
    margin: 0 1em 1em 0;
}
.portlet-header {
    margin: 0.3em;
    padding-bottom: 4px;
    padding-left: 0.2em;
}
.portlet-header .ui-icon {
    float: right;
}
.portlet-content {
    padding: 0.4em;
}
.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important;
}
.ui-sortable-placeholder * {
    visibility: hidden;
}

JavaScript

$(function () {
    $(".column").sortable({
        connectWith: ".column"
    });
    
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");

    $(".portlet-header").click(function () {
        $(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $( ".portlet" )
    .resizable({
        grid: 150
    });
    
		$( ".sortable" )
    .sortable({
        handle:".handle",
    });

    $(".column").disableSelection();
});