I have created code to show/hide data from a DB.  It works, but as I am new to jQuery, I would like to know if this is a good way.HTML:<li class=devInfo>    <span class=sn_table><? echo $sn; ?></span>           <span class=last_edit_table><? echo $last_change; ?></span>            <span class=comment_table><? echo $comment; ?></span>    <span class=model_table><? echo $model_name; ?></span>    <a class=more data-name=<? echo $id; ?> href=>+</a>    <div class=details></div></li>                       jQuery:$(function () {    $(.more).live(click, function () {                var onMe =$(this);    var detailsConteiner = $(onMe).next('div');                var forLoader = $(onMe).parent(li);        if ($(onMe).text() == +) {            $(devInfo).children(span).css({text-indent:, text-overflow:});            $(forLoader).fadeIn(400).prepend('<img  src=/images/css/loader_small.gif style=margin-bottom:.25em; margin-left:1.25em; vertical-align:middle;>');            $(onMe).text(-)            $(devInfo).css(background, );            $(forLoader).css(background, #d6e5f4);            $(onMe).siblings(span).css({text-indent:1000px, text-overflow:clip});                        $(detailsConteiner).empty();            $(details).slideUp(1000);            var value = $(onMe).attr(data-name);            var dataString = 'deviceId=' + value;            $.ajax({                type: POST,                url: helpers/getDetails.php,                data: dataString,                cache: false,                    success: function (html) {                            $(detailsConteiner).prepend(html).slideDown(500);                            $(forLoader).children(img).fadeOut(600);                                    }                            });            return false;        }                    else {            $(details).slideUp(700);            $(onMe).text(+);            $(forLoader).css(background, );            $(onMe).siblings(span).css({text-indent:, text-overflow:});            return false;        }    });});Ajax response:<dl class=details>    <dd>Id: <? echo $id; ?> </dd>    <dd>Serial: <? echo $sn; ?> </dd>        <dd>Model: <? echo $model_name; ?> </dd>    <dd contenteditable  data-name=comment>Comment:<? echo $comment; ?></dd>    <dd>Last Change<? echo date('d.m.Y', strtotime($last_change)); ?> </dd></dl>CSS:.devInfo  img {    margin-bottom:.25em;     margin-left:1.25em;     vertical-align:middle;margin-left:25px; }li.expanded {    background-color: #d6e5f4;}li.expanded span {    text-indent: -1000px;    text-overflow:clip;}JS:*function showDetails() // is not needed as the function insertDetails is doing jobfunction hideRestOfLI() {                     $(.details).slideUp(1000);    }function expand() {        hideRestOfLI();         $(.devInfo).removeClass(ExpandClass);        $(.more).text(ColapsedChar);        $devInfo.addClass(ExpandClass);        $moreLink.text(ExpandedChar);               } completed: hideLoading // complete: hideLoading
Query, populate, show, hide data
javascript;jquery;beginner;html;css
There are many changes to the css through jquery that could just be handled by adding a class to devInfo.I...Changed some variable names for readabilityCreated some variable constants for readabilityCreated single responsibility functions for clean codeOnly transformed elements to jQuery once and stored in a variable starting with '$'Extracted out the style from js and put it in cssPrevented the link's default action from goingAdded functionality to add/remove the 'expanded' classThe code is completely untested. So there is probably some syntax issues, but let me know what you think.CSS.devInfo a.more img {    margin-bottom:.25em;     margin-left:1.25em;     vertical-align:middle;}.devInfo.expanded a.more {    background-color: #d6e5f4;}.devInfo.expanded {    background: url();}.devInfo.expanded .span {    text-indent: 1000px;    text-overflow: clip;}JS$(function () {    var ExpandedChar = -,        ColapsedChar = +,        ExpandClass = 'expanded';    var toggleDetails = function(event) {           event.preventDefault();        var $moreLink = $(this),            $details= $moreLink.next('.details'),             $devInfo = $moreLink.closest('.devInfo');        var displayLoading = function() {            $devInfo.prepend(buildLoadImage()).fadeIn(400);        };        var hideLoading = function() {            $devInfo.children(img).fadeOut(600);        };        var insertDetails = function(html) {              $details.prepend(html).slideDown(500);                        };        var getDetailsFor = function(deviceId) {            $.ajax({                 type: POST,                 url: helpers/getDetails.php,                 data: {deviceId: deviceId},                 cache: false,                 beforeSend: displayLoading,                 success: insertDetails,                 completed: hideLoading             });        }        if (isColapsed()) {            expand();            getDetailsFor($moreLink.attr(data-name));              } else {            colapse();        }            function expand() {            $devInfo.addClass(ExpandClass);            $moreLink.text(ExpandedChar);            showDetails();        }        function showDetails() {            $details.slideUp(1000);        }        function colapse() {            $devInfo.removeClass(ExpandClass);            $moreLink.text(ColapsedChar);            hideDetails();        }        function hideDetails() {            $details.slideUp(700);        }        function isColapsed() {            return $moreLink.text() == ColapsedChar;        }        function buildLoadImage() {            return $('<img />').attr('src', '/images/css/loader_small.gif');        }    }    $(.more).live(click, toggleDetails);});