CODEWITHSUNDEEP
jqueryhtmljquery-ui
zkanoca
zkanoca

Reputation: 9918

How to hide empty accordion content?

I am writing a page using ASP.NET C# environment. I have 7 categories which are shown in a jQuery UI Accordion widget. In other words I have 7 tabs.

Each accordion content comes from DB.

Sometimes some categories are empty. So I want to hide the empty categories.

My head content has those codes:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#accordion").accordion({
            collapsible: true, 
            heightStyle: "content", 
            active: false
        });
    });
</script>

And the body has those:

<div id="accordion">
            <h3>
                <span id="a" runat="server"></span>
            </h3>
            <div>
                <span id="atifa" runat="server"></span>
            </div>
            <h3>
                <span id="b" runat="server"></span>
            </h3>
            <div>
                <span id="atifb" runat="server"></span>
            </div>
            <h3>
                <span id="c" runat="server"></span>
            </h3>
            <div>
                <span id="atifc" runat="server"></span>
            </div>
            <h3>
                <span id="d" runat="server"></span>
            </h3>
            <div>
                <span id="atifd" runat="server"></span>
            </div>
            <h3>
                <span id="e" runat="server"></span>
            </h3>
            <div>
                <span id="atife" runat="server"></span>
            </div>
            <h3>
                <span id="f" runat="server"></span>
            </h3>
            <div>
                <span id="atiff" runat="server"></span>
            </div>
            <h3>
                <span id="g" runat="server"></span>
            </h3>
            <div>
                <span id="atifg" runat="server"></span>
            </div>
        </div>

In according to record's properties, some categories come empty from the DB. I do not want the empty categories to be shown. Regards.

Upvotes: 0

Views: 2542

Answers (2)

palaѕн
palaѕн

Reputation: 73906

Try this:

var $span = $("#accordion_atiflar > div > span:empty");
$span.parent('div').hide();
$span.parent('div').prev('h3').hide();

Upvotes: 2

Piotr Stapp
Piotr Stapp

Reputation: 19830

Because you are workin in asp.net, you can do not render empty Accordion tabs. You will do transfer less data to client, and simple check is really fast so it won't be a performance issue

Upvotes: 0

Related Questions