I see that there are quite some words that are appearing double or more times in my code.I'm thinking there might be a more efficient way of writing this code, only I don't have the knowledge to do so.function transitionData(data) {    if($(div#facebook div#notice).is(:visible)) {        $(div#facebook div#heading *).fadeOut();        $(div#facebook div#notice).animate({opacity:0}, function() {            $(div#facebook div.wrapper > img:first-child).attr(src, http://graph.facebook.com/+data.id+/picture?type=normal);            $(div#facebook h3).html(Facebook account of <b>+data.name+</b>);            $(div#facebook div#heading a).attr(href, http://www.facebook.com/+data.username);            $(div#facebook tr:first-child td:first-child b).text(data.id);            $(div#facebook tr:first-child+tr td:first-child b).text(data.first_name);            $(div#facebook tr:first-child+tr+tr td:first-child b).text(data.last_name);            $(div#facebook tr:first-child td:first-child+td b).text(data.gender.charAt(0).toUpperCase() + data.gender.slice(1));            $(div#facebook tr:first-child+tr td:first-child+td b).text(data.locale);            $(div#facebook tr:first-child+tr+tr td:first-child+td b).text(data.username);            $(div#facebook div#notice).slideUp();            $(div#facebook div.wrapper).slideDown();            $(div#facebook div#heading *).fadeIn();        });    } else {        $(div#facebook div#heading *, div#facebook div.wrapper).fadeOut(function() {            $(div#facebook div.wrapper > img:first-child).attr(src, http://graph.facebook.com/+data.id+/picture?type=normal);            $(div#facebook h3).html(Facebook account of <b>+data.name+</b>);            $(div#facebook div#heading a).attr(href, http://www.facebook.com/+data.username);            $(div#facebook tr:first-child td:first-child b).text(data.id);            $(div#facebook tr:first-child+tr td:first-child b).text(data.first_name);            $(div#facebook tr:first-child+tr+tr td:first-child b).text(data.last_name);            $(div#facebook tr:first-child td:first-child+td b).text(data.gender.charAt(0).toUpperCase() + data.gender.slice(1));            $(div#facebook tr:first-child+tr td:first-child+td b).text(data.locale);            $(div#facebook tr:first-child+tr+tr td:first-child+td b).text(data.username);            $(div#facebook div#heading *, div#facebook div.wrapper).fadeIn();                    });    }}
Showing/hiding a box containing a Facebook profile
javascript;jquery;dom;query selector
I'll take a lead from konijn, and take it a few steps further.First, as konijn did, we break out the repeated parts into their own method.As Daniel Ruf noted, we can save a lot of characters by caching div#facebook node as a variable, and then using .find(selector) to look for subnodes.Also, we don't need to specify the HTML element type when looking for nodes, so we can go from div#facebook to just #facebook.The callback called on completion of methods such as fadeOut() is called for every element that is faded out (for example), where you probably only want this to happen once. Thus, we can replace the call back with a promise that will be called only once, after all of the animation is complete.I'd also give the same warning as konijn regarding the approach of using elements in a certain order:Finally, I must say, your approach is terrible. Your elements should have unique id's ( first_name, username etc. etc. ), the way you select elements now is a maintenance nightmare. Re-ordering the elements means re-writing the JavaScript code!This gives us a version of the code that looks like this:function transitionData(data) {    var $facebook = $(#facebook);    var $notice = $facebook.find(#notice);     if($notice.is(:visible)) {        var $headingStar = $facebook.find(#heading *);        $headingStar.fadeOut();        $notice.animate({opacity:0}, function() {            transitionDataDone(data, $facebook)            $notice.slideUp();            $facebook.find(.wrapper).slideDown();            $headingStar.fadeIn();        });    } else {        var $elementsToFade = $facebook.find(#heading *, .wrapper);        $elementsToFade.fadeOut();        $elementsToFade.promise().done(function() {            transitionDataDone(data, $facebook);            $elementsToFade.fadeIn();        });    }}function transitionDataDone(data, $facebook){    $facebook.find(.wrapper > img:first-child).attr(src, http://graph.facebook.com/+data.id+/picture?type=normal);    $facebook.find(h3).html(Facebook account of <b>+data.name+</b>);    $facebook.find(#heading a).attr(href, http://www.facebook.com/+data.username);    $facebook.find(tr:first-child td:first-child b).text(data.id);    $facebook.find(tr:first-child+tr td:first-child b).text(data.first_name);    $facebook.find(tr:first-child+tr+tr td:first-child b).text(data.last_name);    $facebook.find(tr:first-child td:first-child+td b).text(data.gender.charAt(0).toUpperCase() + data.gender.slice(1));    $facebook.find(tr:first-child+tr td:first-child+td b).text(data.locale);    $facebook.find(tr:first-child+tr+tr td:first-child+td b).text(data.username);}