Question

i got multiple tabs table, and there are tabs one in another, thus i have a mistake in javascript when tab 1 is open: $('.tabcont2:visible')[0].id is undefined, and when tab 2 is open: $('.tabcont0:visible')[0].id id undefined, anyway, hope u’ll understand everything from code:

<script type="text/javascript" src="/JS/tabcontent.js"></script>
<script type="text/javascript">
    function initMenu0() {
        $('#menu0 ul').hide();
        $('#menu0 li a').click(function() {
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#menu0 ul:visible').slideUp('normal').siblings('a').removeClass('open_menu0');
                checkElement.slideDown('normal').siblings('a').addClass('open_menu0');
                return false;
            }
        });
        $("ul.reset a").click(function() {
            $(this).closest("ul").siblings("a").addClass("open_menu0");
        });
    }
    function showCurrentTab0() {
        var curId = $('.tabcont0:visible')[0].id,
            $curLink = $('a[rel="' + curId + '"]');

        $curLink.closest('ul').parent('li').children('a').click();
    }

    function initMenu2() {
        $('#menu2 ul').hide();
        $('#menu2 li a').click(function() {
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#menu2 ul:visible').slideUp('normal').siblings('a').removeClass('open_menu2');
                checkElement.slideDown('normal').siblings('a').addClass('open_menu2');
                return false;
            }
        });

        $("ul.reset a").click(function() {
            $(this).closest("ul").siblings("a").addClass("open_menu2");
        });
    }
    function showCurrentTab2() {
        var curId = $('.tabcont2:visible')[0].id,
            $curLink = $('a[rel="' + curId + '"]');

        $curLink.closest('ul').parent('li').children('a').click();
    }

    $(document).ready(function() {
        initMenu0();
        showCurrentTab0();
        initMenu2();
        showCurrentTab2();
    });
</script>

and the html code:

<div class="block tabbox2">
 <div class="tabbox2">
    <ul id="gstabs2" class="reset">
        <li><a rel="g1" class="selected" href="#">Micae</a></li>
        <li><a rel="g2" href="#">Dahua</a></li>
    </ul>

    <div class="tabgreybox2">
        <div id="g1" class="tabcontent2">
            <div style="position:relative;min-height:430px;">
                <div style="position:absolute;left:-250px;top:-30px;">
                    <div id="gstabs1">
                        <ul id="menu0">
                            <li>
                                <a href="#">Mobil DVR</a>
                                <ul class="reset">
                                    <li><a rel="gs1" class="selected" href="#">MDVR</a></li>
                                    <li><a rel="gs2" class="selected" href="#">Client</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="position:absolute;left:0;">
                    <div class="block tabbox0">
                        <div class="tabbox0">
                            <div class="tabgreybox0">
                                <div id="gs1" class="tabcont0">
                                MDVR
                                </div>
                                <div id="gs2" class="tabcont0">
                                Client
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var countries=new ddtabcontent("gstabs1")
                countries.setpersist(true)
                countries.setselectedClassTarget("link")
                countries.init()
            </script>
        </div>
        <div id="g2" class="tabcontent2">
            <div style="position:relative;min-height:430px;">
                <div style="position:absolute;left:-250px;top:-30px;">
                    <div id="gstabs3">
                        <ul id="menu2">
                            <li>
                                <a href="#">Dökümanlar</a>
                                <ul class="reset">
                                    <li><a rel="s1" class="selected" href="#">PSS</a></li>
                                    <li><a rel="s2" href="#">DVR</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>  
                <div style="position:absolute;left:0;top:0;">
                    <div class="block tabbox0">
                        <div class="tabbox0">
                            <div class="tabgreybox0">
                                <div id="s1" class="tabcont2">
                                    PSS
                                </div>
                                <div id="s2" class="tabcont2">
                                    DVR
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var countries=new ddtabcontent("gstabs3")
                countries.setpersist(true)
                countries.setselectedClassTarget("link")
                countries.init()
            </script>
        </div>
    </div>

    <script type="text/javascript">
        var countries=new ddtabcontent("gstabs2")
        countries.setpersist(true)
        countries.setselectedClassTarget("link")
        countries.init()
    </script> 
 </div>
</div>

Answer 1

swap

$('.tabcont0:visible')[0].id

with

$('.tabcont0:visible:first').attr('id');

jQuery will sort out the rest.

---

Adding [0] will reference the actual DOM element, not jQuerys element. If that raw element doesn’t exist any further functions will cause an error.