can anyone help me please to slove transition issue bootstrap 4. this is making error Uncaught Error: Collapse is transitioning issue is only when not include bootstrap css. in my case bootstrap css conflict my large css. can anyone help to slove out this hell

<script src=".1.1/jquery.min.js"></script>
<script src=".4.0/js/tether.js"></script>
<script src=".0.0-alpha.6/js/bootstrap.js"></script>

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

can anyone help me please to slove transition issue bootstrap 4. this is making error Uncaught Error: Collapse is transitioning issue is only when not include bootstrap css. in my case bootstrap css conflict my large css. can anyone help to slove out this hell

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

• javascript
• jquery
• node.js
• twitter-bootstrap
• bootstrap-4

4 Answers 4

This issue has been solved on Bootstrap 4.0.0-beta. The 4.2.1 version is available now!

There are several ways to download it:

• Download the latest release in a zip file.
• Clone the repo: git clone https://github.com/twbs/bootstrap.git
• Install with npm: npm install bootstrap
• Install with yarn: yarn add [email protected]
• Install with Composer: composer require twbs/bootstrap:4.2.1
• Install with NuGet: CSS: Install-Package bootstrap Sass: Install-Package bootstrap.sass

You can see the Beta 1 ship list #21568 link for more information.

INITIAL ANSWER

There is an error with the Bootstrap v4.0.0-alpha.6 version with the transitioning that will be solved on the next release.

See the issue 22256, pull 21743 and v4.0.0-beta milestone links for more information.

For while, you can use workarounds like the @Nayana_Das example.

Collapse div using following code:

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Check out this FIDDLE.

I recently also had the problem with an older BT project. My problem was simply that I had 2 navbars and both had the same id (as I copied the example twice).

This does not seem to be the case here but I thought I mention it as somebody else might come across this question and has the same issue.

I have faced same problem and accidentally came up with a solution.

 <div class="panel-group">
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title" style="padding: 10px;">
            <a data-toggle="collapse" href="#collapse1">Inbox</a>
          </h4>
           </div>
          <div id="collapse1" class="panel-collapse collapse" style="display: hidden;">
         <ul class="list-group">

           </ul>
        <!--<div class="panel-footer">Footer</div>-->
          </div>
          <div id="collapse1" class="panel-collapse collapse">
         <ul class="list-group">
            <li class="list-group-item">One</li>
         <li class="list-group-item">Two</li>
          <li class="list-group-item">Three</li>
           </ul>
        <!--<div class="panel-footer">Footer</div>-->
          </div>
         </div>
    </div>

In the above Code I have to collapse id -> #collapse1 And Accidentally I created two div and when I reloaded my page the second one was working fine, and first one opened but was not closing and giving the error of transitioning. So I just deleted the content of first #collapse1 and keep it empty and the second one is working fine. I also tried other options such as updating Bootstrap version or changing the place of div, none of them worked. I hope this helps.

Thank you