CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapparallax.js
Carlo
Carlo

Reputation: 11

Bootstrap4 button collapse and Parallax-js not displaying correctly

Bootstrap collaspe div is not pushing the parallax div, but instead going on top of it. See here: https://codepen.io/carlo-designer/pen/zYZoNYM Code is below:

<div class="container my-5">


<!-- Collapse -->  
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
  
  
<!-- Parallax.js --> 
<div class="parallax-window" style="height:300px;" data-parallax="scroll" data-image-src="https://source.unsplash.com/4YhwiEsL0AQ/1000x600"></div>  
</div>  



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.min.js"></script>

Any idea where it may come from ? Thanks

Upvotes: 1

Views: 89

Answers (0)

Related Questions