Question

I have a Jquery toggle which contains an entry form to a MySQL table.

Directly below this toggle I am displaying the data in a list.

What I would like to do is have it so that the toggle is in it’s opened state (removal of “display:none”) if the table has no records. And of course be closed if the table does contain records.

To make matters more complicated my table is hard filtered to the logged in user, so I would only the want the toggle to defaut to the open state if there are no records on the table matching the logged in user.

I hope that makes sense!

My PHP knowledge is poor at best so please go easy on me.

Here’s my toggle code:-

(function($) { $.fn.simpleToggle = function(opts) {
    var options = $.extend({}, $.fn.simpleToggle.defaults, opts);

    return this.each(function() {
        $title = $(this).children('.togTitle');
        $title.each(function() {
            $(this).click( function() {
                $item = $(this);
                $item.next('.togDesc').slideToggle('fast', function() {
                    $icon = $item.children('.iconSymbol');
                    if ($(this).css('display') == 'block') {
                        $icon.removeClass('plus').addClass('minus');
                    } else {
                        $icon.removeClass('minus').addClass('plus');
                    }
                });
            });
        });
    });

}
$.fn.simpleToggle.defaults = {}
})(jQuery);

Answer 1

it’s quite hard to imagine the underlying dom.

However, something like this could do the trick:

(function($) { $.fn.simpleToggle = function(opts) {
    var options = $.extend({}, $.fn.simpleToggle.defaults, opts);

    return this.each(function() {
        $title = $(this).children('.togTitle');
        $title.each(function() {
            $('.togDesc', this).each( function () {
                if ( $(this).children('.iconSymbol').length == 0 ) {    
                    $(this).show();                                 
                }
            });
            $(this).click( function() {
                $item = $(this);
                $item.next('.togDesc').slideToggle('fast', function() {
                    $icon = $item.children('.iconSymbol');
                    if ($(this).css('display') == 'block') {
                        $icon.removeClass('plus').addClass('minus');
                    } else {
                        $icon.removeClass('minus').addClass('plus');
                    }
                });
            });
        });
    });

}
$.fn.simpleToggle.defaults = {}
})(jQuery);