手风琴中的复选框

Question

I am trying to create a system using asp.net and I'd like to use an accordion.

I'd like my accordion to have a header with a check box and then once that check box is checked it will display check boxes in the content section, so it will look like this:

-HEADER

 -CONTENT

 -CONTENT

 -CONTENT

-HEADER

 -CONTENT

 -CONTENT

 -CONTENT

However, the headers that are displayed will depend on the selection from another check box and the two 'Headers' that are in the example will be in the same accordion. Is it possible to do this? I would need the ability to select multiple check boxes as well, so I'm not sure whether using a checkbox or a checkboxlist would be the best way to go

Sorry if I haven't made myself very clear Please, tell me if you need some more info

Many thanks

Answer 1

Please try this html code

<link href = "https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel = "stylesheet" />
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="accordion">
    <h3>
        <label for='product-44-44'>
            <input type='checkbox'  name="header" value="header" id="header"/>
            HEADER
        </label>
    </h3>
    <div class="columns">
        <div class="d1">
            <label>
                <input type="checkbox" name="content1" value="content1" id="content1">
                CONTENT 1
            </label>
        </div>
        <div class="d1">
            <label>
                <input type="checkbox" name="content2" value="content2" id="content2">
                CONTENT 2
            </label>
        </div>
    </div>
</div>
$("#accordion")
            .accordion({
                collapsible: true,
                active: false,
                heightStyle: "content",
                beforeActivate: function (event, ui) {
                    var oldInput = ui.oldHeader.find('input');
                    oldInput.prop('checked', !oldInput.prop('checked')) // this bit unchecks when the accordion is closed

                    var newInput = ui.newHeader.find('input'); // this bit checks when the accordion is opened
                    newInput.prop('checked', !newInput.prop('checked'))
                }
            });

try to run code using to click this link https://jsfiddle.net/sunnykalariya/5v9aqjkf/