jQuery UI Tabs: Mismatching fragment identifier even with tabs defined

Question

I've the following tabs defined in my document.

<div class="bill-selection-tab">
                <ul>
                    <li class="tab active">
                        <div class="tab_left"></div>
                        <div class="tab_right"></div>
                        <div class="tab_proper">
                            <img alt="open-bills" src="images/open-bill-active.png"/>
                            <a href="#open-tab">OPEN</a>
                        </div>
                    </li>
                    <li class="tab">
                        <div class="tab_left"></div>
                        <div class="tab_proper">
                            <img alt="settled-bills" src="images/settled-bill.png"/>
                            <a href="#settled-tab">SETTLED</a>
                        </div>
                        <div class="tab_right"></div>
                    </li>
                    <li class="tab">
                        <div class="tab_left"></div>
                        <div class="tab_proper">
                            <img alt="cancel-bills" src="images/cancelled-bill.png"/>
                            <a href="#closed-tab">CANCEL</a>
                        </div>
                        <div class="tab_right"></div>
                    </li>
                </ul>
            </div>

<div id="open-tab">
                    <!-- Bill list -->
                    <div class="bill-list">

                    </div>
                    <!-- End of Bill list -->
                </div>

                <div id="closed-tab">
                    <!-- Bill list -->
                    <div class="bill-list">

                    </div>
                    <!-- End of Bill list -->
                </div>

                <div id="settled-tab">
                    <!-- Bill list -->
                    <div class="bill-list">

                    </div>
                    <!-- End of Bill list -->
                </div>

The required tabs are already defined but still it throws the exception. What am I doing wrong here!

Answer 1

The problem is the target elements are not inside the tab element bill-selection-tab.

Try

<div class="bill-selection-tab">
    <ul>
        <li class="tab active">
            <div class="tab_left"></div>
            <div class="tab_right"></div>
            <div class="tab_proper">
                <img alt="open-bills" src="images/open-bill-active.png"/>
                <a href="#open-tab">OPEN</a>
            </div>
        </li>
        <li class="tab">
            <div class="tab_left"></div>
            <div class="tab_proper">
                <img alt="settled-bills" src="images/settled-bill.png"/>
                <a href="#settled-tab">SETTLED</a>
            </div>
            <div class="tab_right"></div>
        </li>
        <li class="tab">
            <div class="tab_left"></div>
            <div class="tab_proper">
                <img alt="cancel-bills" src="images/cancelled-bill.png"/>
                <a href="#closed-tab">CANCEL</a>
            </div>
            <div class="tab_right"></div>
        </li>
    </ul>

    <div id="open-tab">
        <!-- Bill list -->
        <div class="bill-list">

        </div>
        <!-- End of Bill list -->
    </div>

    <div id="closed-tab">
        <!-- Bill list -->
        <div class="bill-list">

        </div>
        <!-- End of Bill list -->
    </div>

    <div id="settled-tab">
        <!-- Bill list -->
        <div class="bill-list">

        </div>
        <!-- End of Bill list -->
    </div>
</div>

Demo: Fiddle