sortexpand

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<ul id = 'sortable'>
<div class="toggler">
    <div id="effect" class="newClass">Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.</div>
</div>
<div class="toggler">
    <div id="effect" class="newClass">Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.</div>
</div>
</ul>

CSS

.toggler {
        width: 500px;
        height: 200px;
        position: relative;
    }
    .effect {
        position: relative;
    }
    #sortable {
        list-style-type: none;
        margin-left:auto;
        margin-right:auto;
        padding: 0;
        width: 60%;
    }
    .newClass {
        width: 240px;
        padding: 1em;
        letter-spacing: 0;
        font-size: 1.2em;
        margin: 0;
        border: 1px solid black;
    }
    .anotherNewClass {
        text-indent: 40px;
        letter-spacing: .4em;
        width: 400px;
        height: 100px;
        border: 1px solid black;
        padding
    
    #sortable { 
	list-style-type: none; 
	margin-left:auto;
	margin-right:auto;
	padding: 0; 
	width: 60%;
}

JavaScript

$(function () {

     $("#sortable").sortable();

     $("#sortable").disableSelection();

 });


 $(function () {

     $(".toggler").click(function () {

         $(".newClass").switchClass("newClass", "anotherNewClass", 1000);

         $(".anotherNewClass").switchClass("anotherNewClass", "newClass", 1000);

         return false;

     });

 });