How to convert JavaScript to jQuery
I have the following JavaScript code which I like to convert to jQuery but has no luck.

P.S. OMG! Your post does not have much context to explain the code sections; please explain your scenario more clearly.

<!-- language: lang-js -->

    $(function() {
    
        // Set up variables
        var $el, $parentWrap, $otherWrap, 
            $allTitles = $("dt").css({
                padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
                "cursor": "pointer" // make it seem clickable
            }),
            $allCells = $("dd").css({
                position: "relative",
                top: -1,
                left: 0,
                display: "none" // info cells are just kicked off the page with CSS (for accessibility)
            });
        
        // clicking image of inactive column just opens column, doesn't go to link   
        $("#page-wrap").delegate("a.image","click", function(e) { 
            
            if ( !$(this).parent().hasClass("curCol") ) {         
                e.preventDefault(); 
                $(this).next().find('dt:first').click(); 
            } 
            
        });
        
        // clicking on titles does stuff
        $("#page-wrap").delegate("dt", "click", function() {
            
            // cache this, as always, is good form
            $el = $(this);
            
            // if this is already the active cell, don't do anything
            if (!$el.hasClass("current")) {
            
                $parentWrap = $el.parent().parent();
                $otherWraps = $(".info-col").not($parentWrap);
                
                // remove current cell from selection of all cells
                $allTitles = $("dt").not(this);
                
                // close all info cells
                $allCells.slideUp();
                
                // return all titles (except current one) to normal size
                $allTitles.animate({
                    fontSize: "14px",
                    paddingTop: 0,
                    paddingRight: 0,
                    paddingBottom: 0,
                    paddingLeft: 0
                });
                
                // animate current title to larger size            
                $el.animate({
                    "font-size": "20px",
                    paddingTop: 0,
                    paddingRight: 0,
                    paddingBottom: 0,
                    paddingLeft: 0
                }).next().slideDown();
                
                // make the current column the large size
                $parentWrap.animate({
                    width: 320
                }).addClass("curCol");
                
                // make other columns the small size
                $otherWraps.animate({
                    width: 128
                }).removeClass("curCol");
                
                // make sure the correct column is current
                $allTitles.removeClass("current");
                $el.addClass("current");  
            
            }
            
        });
        
        $("#starter").trigger("click");
        
    });

Any help is greatly appreciated.
How to convert JavaScript to jQuery
===

I have the following JavaScript code which I like to convert to jQuery but has no luck.

P.S. OMG! Your post does not have much context to explain the code sections; please explain your scenario more clearly.

<!-- language: lang-js -->

    $(function() {
    
        // Set up variables
        var $el, $parentWrap, $otherWrap, 
            $allTitles = $("dt").css({
                padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
                "cursor": "pointer" // make it seem clickable
            }),
            $allCells = $("dd").css({
                position: "relative",
                top: -1,
                left: 0,
                display: "none" // info cells are just kicked off the page with CSS (for accessibility)
            });
        
        // clicking image of inactive column just opens column, doesn't go to link   
        $("#page-wrap").delegate("a.image","click", function(e) { 
            
            if ( !$(this).parent().hasClass("curCol") ) {         
                e.preventDefault(); 
                $(this).next().find('dt:first').click(); 
            } 
            
        });
        
        // clicking on titles does stuff
        $("#page-wrap").delegate("dt", "click", function() {
            
            // cache this, as always, is good form
            $el = $(this);
            
            // if this is already the active cell, don't do anything
            if (!$el.hasClass("current")) {
            
                $parentWrap = $el.parent().parent();
                $otherWraps = $(".info-col").not($parentWrap);
                
                // remove current cell from selection of all cells
                $allTitles = $("dt").not(this);
                
                // close all info cells
                $allCells.slideUp();
                
                // return all titles (except current one) to normal size
                $allTitles.animate({
                    fontSize: "14px",
                    paddingTop: 0,
                    paddingRight: 0,
                    paddingBottom: 0,
                    paddingLeft: 0
                });
                
                // animate current title to larger size            
                $el.animate({
                    "font-size": "20px",
                    paddingTop: 0,
                    paddingRight: 0,
                    paddingBottom: 0,
                    paddingLeft: 0
                }).next().slideDown();
                
                // make the current column the large size
                $parentWrap.animate({
                    width: 320
                }).addClass("curCol");
                
                // make other columns the small size
                $otherWraps.animate({
                    width: 128
                }).removeClass("curCol");
                
                // make sure the correct column is current
                $allTitles.removeClass("current");
                $el.addClass("current");  
            
            }
            
        });
        
        $("#starter").trigger("click");
        
    });

Any help is greatly appreciated.