Remove items, resize columns, shuffle a list

I'm at the very beginning of starting to learn object-oriented programming patterns in JavaScript and PHP. Up until now I've always coded in a purely functional pattern. I'm doing a lot of reading, but I think what would really help me is being able to see a direct correlation between how my code is currently written and how it would be written in OO.

Could someone explain to me how I could write something like this, which consists of several event functions, in an object-oriented fashion?

(function ( $, window, document, undefined ) { setTimeout(function(){$(document.body).append('<div id="instruction"><div class="inner"></div></div>');
$(document.getElementById('instruction')).animate({'opacity':1},1500); },400);$( document ).on( 'click', '*', function () {
$(document.getElementById('instruction')).animate({'opacity':0},1500,function(){$(this).remove();
});
});

var l = document.getElementById('left');
var r = document.getElementById('right');

// Expand right section
$('hr').on('click', function(){$('article').show().removeClass('short').animate({'opacity':1}, function(){
$(this).find('p').show(); var m =$(document.getElementById('middle'));
var h = Math.max(l.offsetHeight,r.offsetHeight);
m.css({'height':h + 'px'});
});
});

$('#step2').on('click', function(){$(this).remove();
$('<button id="shuffle">SHUFFLE</button>').appendTo('footer'); }); // remove list items$( document ).on( 'click', 'span', function () {
var subtract = $(this).parent().height();$(this).parent().remove();
var m = $(document.getElementById('middle')); var h = Math.max(l.offsetHeight,r.offsetHeight); m.css({'height':h + 'px'}); }) // shuffle$( document ).on( 'click', '#shuffle', function () {
var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}
});
$(window).resize(function(){ var m =$(document.getElementById('middle'));
if (load == false) { // only need to do this once
$.getJSON('', function(e) { // load data from Google Spreadsheet var t = 1,a,l; for (var n = 0; n < e.feed.entry.length; n++) { a = e.feed.entry[n].gsx$name.$t; l = '<li class="list" aria-role="list-item">' + a + '<span class="noselect" aria-role="radio">remove</span></li>';$("ul").prepend(l);
}
t++
}
)
.success(function(){ // evaluate height, set vertical rule
var h = Math.max(l.offsetHeight,r.offsetHeight);
m.css({'height':h + 'px'});
})
.fail(function() { // load something even if there is no connection
var s = ['Lorem','ipsum'];
var a = s.length;
for (var i = 0; i < a; i++) {
l = '<li class="list">' + s[i] + '</li>';
$("ul").prepend(l); } });$.getJSON('',
function(e) {
var t = 1,a,l;
for (var n = 0; n < e.feed.entry.length; n++) {
a = e.feed.entry[n].gsx$paragraph.$t;
l = '<p>' + a + '</p>';
\$("article").prepend(l);
}
t++
}
)
}
var h = Math.max(l.offsetHeight,r.offsetHeight);
m.css({'height':h + 'px'});

}).resize();

})( jQuery, window, document );


The code block is not really relevant beyond serving as an example for me, but its purpose is merely a test, visible here. It consists of a 2-column layout with a border between the two. The middle border must always equal the tallest column and each columns height needed to be manipulable, with a secondary step to shuffle the order of the content on the left side.