Topic: Accordion inside panel of a tab-list

staehla pro asked 6 years ago


Hi Since i have updated from version 4.1.1 to 4.2.0 my accordion which i have placed inside the panel of a tab-list behaves strange. If i open the accordion, the "in" from the class="tab-pane fade in active" of panel1 gets removed and it adds "collapse". That for the panel1 becomes invisible. If i remove the data-parent="#accordion" from the , then it works fine... Can this be avoid other then remove the data-parent="#accordion" Thank you in advance. Stähla Example code:

<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-3 red" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Follow</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Contact</a>
    </li>
</ul>

<!-- Tab panels -->
<div class="tab-content card">

    <!--Panel 1-->
    <div class="tab-pane fade in active" id="panel1" role="tabpanel">
        <br>

		<!--Accordion wrapper-->
		<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">

			<!--First panel-->
			<div class="panel panel-default">

				<!--Panel heading-->
				<div class="panel-heading" role="tab" id="headingOne">
					<h5 class="panel-title">
		<a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1<i class="fa fa-angle-down rotate-icon"></i>
		</a>
			</h5>
				</div>

				<!--Panel body-->
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
					Anim pariatur cliche reprehenderit, enim eiusmod high life 
				</div>
			</div>
			<!--/.First panel-->

		</div>
		<!--/.Accordion wrapper-->
	
    </div>
    <!--/.Panel 1-->

    <!--Panel 2-->
    <div class="tab-pane fade" id="panel2" role="tabpanel">
        <br>

        <p>Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

    </div>
    <!--/.Panel 2-->

    <!--Panel 3-->
    <div class="tab-pane fade" id="panel3" role="tabpanel">
        <br>

        <p>Tempora, placeat ratione porro voluptate odit minima.</p>

    </div>
    <!--/.Panel 3-->

</div>

staehla pro answered 6 years ago


Hi Bartlomiej Thank you for your reply. In this case i will use MDB4.1.1 again for the moment. Best regards Stähla

This seems weird. We didn't change anything in accordions. There's a problem with Bootstrap 4 A5. We'll try to fix it

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No