CODEWITHSUNDEEP
javascriptjquery
kumara
kumara

Reputation: 937

JQuery collapsable menu issue

I am using the JQuery collapsible menu for my application. I am using 4 collapsible areas in my application. Here I am showing only one section. How can I make this example appear for 4 areas of my application? What can I do to change my code for multiple areas?

Below is the given example. https://jsbin.com/ciloliweto/

How can I change this to make more than one collapsible areas?

Below is the multiple collapsible (two sections)

 <div class="panel-group driving-license-settings" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> </h4>
            <div class="checkbox" id="testCheckBox">
                <label data-target="#collapseOne">
                    <input type="checkbox"/> Header 01 
                </label>
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="driving-license-kind">
                    Content 1

                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-group driving-license-settings" id="accordion2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> </h4>
            <div class="checkbox" id="testCheckBox2">
                <label data-target="#collapseTwo">
                    <input type="checkbox"/> Header 02
                </label>
            </div>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="driving-license-kind">
                     Content 2
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 43

Answers (2)

ROOT
ROOT

Reputation: 11622

If I got your question right, then you can use just use .parents() combined with .find() to select the collapsable elements near your input, Note that I added different IDs for panels and <input>, here is a working snippet:

$('.collapse').collapse();

$("[type='checkbox']").bind('click dblclick', function(evt) {
    if ($(this).is(":checked")) {
        $(this).parents('.panel-group').find('.collapse').slideDown('fast');
    } else {
        $(this).parents('.panel-group').find('.collapse').slideUp('fast');
    }
})
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>

<body>

    <div class="panel-group driving-license-settings" id="accordion0">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"> </h4>
                <div class="checkbox" id="testCheckBox">
                    <label data-target="#collapseOne">
                        <input type="checkbox" /> I have Driver License
                    </label>
                </div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" value="">A</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">B</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">C</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">D</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">E</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-group driving-license-settings" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"> </h4>
                <div class="checkbox" id="testCheckBox1">
                    <label data-target="#collapseOne">
                        <input type="checkbox" /> I have Driver License
                    </label>
                </div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" value="">A</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">B</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">C</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">D</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">E</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-group driving-license-settings" id="accordion2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"> </h4>
                <div class="checkbox" id="testCheckBox2">
                    <label data-target="#collapseOne">
                        <input type="checkbox" /> I have Driver License
                    </label>
                </div>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" value="">A</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">B</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">C</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">D</div>
                        <div class="checkbox">
                            <input type="checkbox" value="">E</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
        
    </script>

</body>

</html>

Upvotes: 2

himanshu
himanshu

Reputation: 125

As far as I can understand your query, you need to show this collapsible menu either on 4 different pages or on 4 different places on the same page.

If it is so, then you can do this in a very simple way. What you can do is, you can assign 4 different id's or classes to all your 4 different menus and in the same jquery code, you can select the class and id's by "$" selector using "command".

e.g. $('.collapse, .collapse2, .collapse3, .collapse4').collapse();

    $("#testCheckBox :checkbox, #testCheckBox2 :checkbox").bind('click 
       dblclick', function(evt) {
        console.log(evt.type);
        if ($(this).is(":checked")) {
            $('.collapse').slideDown('fast');
        } else {
            $('.collapse').slideUp('fast');
        }
    })

But as your question is not elaborated in a sufficient way, so I can't give you the exact solution.

Upvotes: 0

Related Questions