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>
Rent Charter Buses Company
READ ALSO
How can i make the images display in a circle using d3?

How can i make the images display in a circle using d3?

I have to display the images in circlesI tried the code available in stack overflow but it doesn't work for me image

327
Detecting when user scrolls to bottom of div with jQuery

Detecting when user scrolls to bottom of div with jQuery

I have a div box (called flux) with a variable amount of content insideThis divbox has overflow set to auto

360
DOM editing with jquery in angular directive

DOM editing with jquery in angular directive

Hello there I would like to replace element tag by anotherIn addition, I would like to do the same with all children and children of children

345
set .draggable revert by element id

set .draggable revert by element id

Ok, I don't know if it is possible, but it looks like it should

286