I have been writing jQuery code for many years, but i never followed any specific patterns to write it. Most of the times , i just wrote simple plain code as below. But as soon as i dumped more and more codes , everything became a mess. So, i decided to write same code in two different pattern : Constructor and Modular. Both pattern give us organizable beautiful codes.

Please check the code below and kindly provide your suggestions.

Plain jQuery Style

$(document).ready(function() {

    // Get and store elements from DOM to js
    var personal_information='<div id=personal-information>'+$('#personal-information').html()+'</div>';
    var clinic_information='<div id=clinic-information>'+$('#clinic-information').html()+'</div>';

    // Remove both sections initially
    $('#personal-information').remove();
    $('#clinic-information').remove();

    $('input[type=radio][name=is_superuser]').change(function() {
        if($(this).val()==1){
            $('#personal-information').remove();
            $('#swap-result').after(clinic_information);
        } else {
            $('#clinic-information').remove();
            $('#swap-result').after(personal_information);
        }
    });  
});

Object Oriented (Constructor Pattern)

$( document ).ready(function() {

    var Action=function() {

        // Assign DOM elements to js variables.
        this.$domBody = $('body').html();
        this.$personalInformation = $('#personal-information', this.$domBody);
        this.$clinicInformation = $('#clinic-information', this.$domBody);
        this.$triggerEvent= $('input[type=radio][name=is_superuser]');

        // Get Action running 
        this.getReady();
        this.bindEvents();

    };

    Action.prototype.getReady= function () {
        $('#clinic-information').remove();
    };

    Action.prototype.bindEvents= function () {
        this.$triggerEvent.change($.proxy(this.onChanged, this));
    };

    Action.prototype.onChanged= function (event) {
        if(event.target.value==1){
            this.swap('personal','clinic');
        } else {
            this.swap('clinic','personal');
        }
    };

    Action.prototype.swap=function(from,to){
        var $to = 'this.$'+to+'Information';
        console.log($('#'+from+'-information'));
        $('#'+from+'-information').remove();
        if( $('#'+to+'-information').length<1){
            $('#swap-result').after(eval($to));
        }
    };

    var action= new Action();

});

Object Oriented (Modular Pattern)

$( document ).ready(function() {

    var action=(function(){

        // Assign DOM elements to js variables.
        var domBody = $('body').html();
        var $personalInformation = $('#personal-information', domBody);
        var $clinicInformation = $('#clinic-information', domBody);
        var $triggerEvent= $('input[type=radio][name=is_superuser]');

        // Making DOM ready for futher actions
        var getReady= function () {
            $('#clinic-information').remove();
        }

        //Binding events to the elements
        var bindEvents= function () {
            $triggerEvent.change(function () {
                if($(this).val()==1){
                    swap('personal','clinic');
                } else {
                    swap('clinic','personal');
                }
            });
        }

        //Swap elements between clinic and personal
        var swap=function(from,to){
            var $to = '$'+to+'Information';
            $('#'+from+'-information').remove();
            if( $('#'+to+'-information').length<1){
                $('#swap-result').after(eval($to));
            }
        }   

        // Get Action running 
        var startAction=function(){
            getReady();
            bindEvents();
        }

        // Expose only the needed methods
        return {
            start: startAction
        };

    })();

    action.start();

});

Enjoy the good coding times!

Check more patterns