TEXT AREA to HTML and PREVIEW

TEXT AREA to HTML and PREVIEW - Andrew Pougher

HTML

<textarea id='textarea' class="form-control" rows="3">Andrew 0.5 <img src="http://placehold.it/40x40/" class="inline"/></textarea>
<div id="textbox" class='hideit text-block'> </div>
<a href="#" id="change" class="btn btn-info">Preview</a>

CSS

.hideit{
    opacity: 0;

    -webkit-transition: opacity 0.5s ease-in;
       -moz-transition: opacity 0.5s ease-in;
        -ms-transition: opacity 0.5s ease-in;
         -o-transition: opacity 0.5s ease-in;
            transition: opacity 0.5s ease-in;
}

.fadeIn{opacity:1}

JavaScript

var textbox = $("#textbox");
var textarea = $("#textarea");


    
$("#chang1e").click(function () {
    //Check for textbox or textarea
    if ($("#textbox").length === 1) {
        //Copy value to textarea
        textarea.val(textbox.val());
        //Replace textbox with textarea
        textbox = textbox.replaceWith(textarea);
    } else {
        //Copy value to textbox
        textbox.val(textarea.val());
        //Replace textarea with textbox
        textarea = textarea.replaceWith(textbox);
    }
});

$("#change").click(function() {
  var el = this;
  return (el.tog^=1) ? turnOn(el) : turnOff(el);
}); 


function turnOn(el){
      $('#textbox').html(textarea.val()).addClass('fadeIn');
      $('#textarea').hide();
};
 function turnOff(el){
         $('#textbox').removeClass("fadeIn").addClass("hideit");
      $('#textarea').show();
};