Query, populate, show, hide data 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:

&lt;li class="devInfo"&gt;
    &lt;span class="sn_table"&gt;&lt;? echo $sn; ?&gt;&lt;/span&gt;       
    &lt;span class="last_edit_table"&gt;&lt;? echo $last_change; ?&gt;&lt;/span&gt;        
    &lt;span class="comment_table"&gt;&lt;? echo $comment; ?&gt;&lt;/span&gt;
    &lt;span class="model_table"&gt;&lt;? echo $model_name; ?&gt;&lt;/span&gt;
    &lt;a class="more" data-name="&lt;? echo $id; ?&gt;" href=""&gt;+&lt;/a&gt;
    &lt;div class="details"&gt;&lt;/div&gt;
&lt;/li&gt;                       


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('&lt;img  src="/images/css/loader_small.gif" style="margin-bottom:.25em; margin-left:1.25em; vertical-align:middle;"&gt;');
            $(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:

&lt;dl class="details"&gt;
    &lt;dd&gt;Id: &lt;? echo $id; ?&gt; &lt;/dd&gt;
    &lt;dd&gt;Serial: &lt;? echo $sn; ?&gt; &lt;/dd&gt;    
    &lt;dd&gt;Model: &lt;? echo $model_name; ?&gt; &lt;/dd&gt;
    &lt;dd contenteditable  data-name="comment"&gt;Comment:&lt;? echo $comment; ?&gt;&lt;/dd&gt;
    &lt;dd&gt;Last Change&lt;? echo date('d.m.Y', strtotime($last_change)); ?&gt; &lt;/dd&gt;
&lt;/dl&gt;


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 job

function hideRestOfLI() {            
         $(".details").slideUp(1000);
    }

function expand() {
        hideRestOfLI(); 
        $(".devInfo").removeClass(ExpandClass);
        $(".more").text(ColapsedChar);
        $devInfo.addClass(ExpandClass);
        $moreLink.text(ExpandedChar);           

    }




 completed: hideLoading // complete: hideLoading
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 readability
Created some variable constants for readability
Created single responsibility functions for clean code
Only transformed elements to jQuery once and stored in a variable starting with '$'
Extracted out the style from js and put it in css
Prevented the link's default action from going
Added functionality to add/remove the 'expanded' class


The 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 $('&lt;img /&gt;').attr('src', '/images/css/loader_small.gif');
        }
    }

    $(".more").live("click", toggleDetails);
});