locked
Need a way to collapse one div when other div is expanded RRS feed

  • Question

  • User1182587605 posted

    On my page, I have two div tags which has a parent with an ID. I want to toggle the collapse of these two div tags which are one below the other(Vertical Navigation bar) when the other div tag heading is selected. I am unable to do so. Please check my code for the div tags and suggest me what I need to modify to achieve my functionality. I am using bootstrap accordion in my cshtml page to display dynamic content in both the AccordionParent and AccordionParent1 div tags. When Registered carrier text(heading) is clicked, Registered Document content should be collapsed and vice versa.

    Please gelp me with this

     <div class="row  col-md-12 accordion" id="ConfigureCarriersAndDocuments">
    <div class="col-md-8">
    
    <div id="AccordionParent" class="panel-group" data-toggle="collapse" data-target="#ConfigureCarriersAndDocuments" aria-expanded="false" aria-controls="">
    <div id="AccordionParent" class="panel-group">
    <div class="col-md-12 panel-default">
    <div class="col-md-12 panel-heading" id="mastercarrier">
    <h4 class="panel-title btn btn-link">
    <a class="LinkedObjects" id="RegisteredCarriersStatic" data-toggle="collapse" data-target="#ShowCarriers" aria-expanded="false" aria-controls="">
    Registered Carriers
    </a>
    </h4>
    @*dynamic navigation bar content*@ </div> <div id="AccordionParent1" class="panel-group" data-toggle="collapse" data-target="#ConfigureCarriersAndDocuments" aria-expanded="false" aria-controls="">
    <div class="col-md-12 panel-default">
    <div class="col-md-12 panel-heading">
    <h4 class="panel-title btn btn-link">
    <a class="LinkedObjects" id="GenericRegisteredDocumentsStatic" data-toggle="collapse" data-target="#DocumentResults" aria-expanded="false">
    Registered Documents
    </a>
    </h4> @*dynamic navigation bar*@ </div> </div> </div>

    Wednesday, December 18, 2019 5:23 PM

All replies

  • User288213138 posted

    Hi acmedeepak,

    Need a way to collapse one div when other div is expanded

    According to your description, i made demo for you. you can use data-parent property to achieve this requirement.

    The code:

    <div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Item #1
                            </button>
                        </h2>
                    </div>
    
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            This id collapseOne
                        </div>
                    </div>
                </div>
    
    
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            This is collapseTwo
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            This is collapseThree
                        </div>
                    </div>
                </div>
            </div>

    The result:

    Best regards,

    Sam

    Thursday, December 19, 2019 8:08 AM