Element by class/id click hides all divs, not considering parent id/class

264

May 12, 2017, at 9:00 PM

I have the following jquery:

$('#second-panel li.link-panel').on('click', function() {
        var showDiv = $(this).children('a').attr('href').split('#');
        if ($('div#'+showDiv[1]).css('display') == 'none') {
            $('#second-panel').children('div.panel').hide();
            $('#second-panel li.link-panel').removeClass('active');
            $('div#'+showDiv[1]).slideDown();
            $(this).toggleClass('active');
        } else {
            $(this).toggleClass('active');
            $('div#'+showDiv[1]).slideUp();
        }
    });
    $('.fourth-panel li.link-panel').on('click', function() {
        var showDiv = $(this).children('a').attr('href').split('#');
        console.log($('.fourth-panel').children('div.panel').length);
        if ($('div#'+showDiv[1]).css('display') == 'none') {
            $('.fourth-panel').children('div.panel').hide();
            $('.fourth-panel li.link-panel').removeClass('active');
            $('div#'+showDiv[1]).slideDown();
            $(this).toggleClass('active');
        } else {
            $(this).toggleClass('active');
            $('div#'+showDiv[1]).slideUp();
        }
    });

And html:

<div id="second-panel">
    <ul class="tabs">
        <li class="link-panel active"><a href="#tab1">Tab 1</a></li>
        <li class="link-panel"><a href="#tab2">Tab 2</a></li>
        <li class="link-panel"><a href="#tab3">Tab 3</i></a></li>
    </ul>
        <div id="tab1" class="panel show">
            <p>hi!</p>
        </div>
        <div id="tab2" class="panel">
            <p>yo!</p>
        </div>
        <div id="tab3" class="panel">
            <p>hi 3</p>
        </div>  
</div>
<div class="fourth-panel">
            <ul class="tabs">
                <li class="link-panel active"><a href="#tab4">Tab 4</a></li>
                <li class="link-panel"><a href="#tab5">Tab 5</a></li>
            </ul>
            <div id="tab4" class="panel show">
                <p>hi!</p>
            </div>
            <div id="tab5" class="panel">
                <p>hi!</p>
            </div>
        </div>

Ideally, if I click a tab within #second-panel, it will switch content within #second-panel, and if I click a tab within .fourth-panel, it will switch content within .fourth-panel.

Yet, if I click a tab within .fourth-panel div, it hides all the .panel divs in both .fourth-panel as well as #second-panel. Yet, the console.log line says there are only 2 children .panel of .fourth-panel. This only happens the first time I click a tab in either .fourth-panel or #second-panel. Subsequent clicks work as I want them to. What am I missing here?

Answer 1

Is this the output you want try following script code:

<script>
    $(document).ready(function () {
        $('#second-panel li.link-panel').on('click', function () {
            var showDiv = $(this).children('a').attr('href').split('#');
            if ($('div#' + showDiv[1]).css('display') == 'none') {
                $('#second-panel').children('div.panel').hide();
                $('#second-panel li.link-panel').removeClass('active');
                $('div#' + showDiv[1]).slideDown();
                $(this).toggleClass('active');
            } else {
                $(this).toggleClass('active');
                $('div#' + showDiv[1]).slideUp();
            }
        });
        $('.fourth-panel li.link-panel').on('click', function () {
            var showDiv = $(this).children('a').attr('href').split('#');
            console.log($('.fourth-panel').children('div.panel').length);
            if ($('div#' + showDiv[1]).css('display') == 'none') {
                $('.fourth-panel').children('div.panel').hide();
                $('.fourth-panel li.link-panel').removeClass('active');
                $('div#' + showDiv[1]).slideDown();
                $(this).toggleClass('active');
            } else {
                $(this).toggleClass('active');
                $('div#' + showDiv[1]).slideUp();
            }
        });
    });
</script>