I have been looking for ways to provide as much data as possible to my users without cluttering up the screen too much. In my last post Truncate Lengthy Text for Cleaner Display in ASP.NET ListView Using jQuery I think I found a pretty good way to achieve this but it doesn't work for all situations. An example would be when you have multiple detail records per parent record such as notes, orders etc.

One way I thought to solve this was to have a ListView hide the child records until the user wanted to view the details. (I was doing this before using the SelectedItemTemplate of the ListView, but this requires a postback plus you can't view the child records of multiple parent records at the same time).  Hiding and showing items is really easy with jQuery. See the effects section in the jQuery docs for more info.

Demo | Download

End Product:

jQuery:

    <script type="text/javascript">
        $(document).ready(function() {
            $(".notes").hide();

            $(".notesCount").click(function() {
                toggleExpansionImage($(this).parent().find(".expand"));
                $(this).parent().next().toggle();
            });

            $('.expand').click(function() {
                toggleExpansionImage($(this));
                $(this).parent().next().toggle();
            });
        });

        function toggleExpansionImage(id) {
            if ($(id).hasClass('hidden'))
                $(id).find("#expandImg").attr("src", "_assets/img/plus.png");
            else
                $(id).find("#expandImg").attr("src", "_assets/img/minus.png");

            $(id).toggleClass('hidden');            
        }
    </script> 

This first thing jQuery does is find all the table rows that have the class "notes" and hides them. The second selection finds all of the items with a class "notesCount" and adds a click event that toggles the plus/minus images and then toggles the visibility of the next row in the table. The third selection (class "expand") takes care of switching the plus/minus images as well as also showing or hiding the next row in the table.

Be sure to check out the demo and let me know what I messed up so that I can make things better.