CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Hkm Sadek
Hkm Sadek

Reputation: 3209

Bootstrap collapse doesn't stay open after clicking

I have laravel and vue js installed and using bootstrap. I am trying to use bootstrap collapse. But when I click to open the collapsed item it opens for some milisecond and then disappear. Here is my code 

<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
<div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

I tried to use $('.collapse').collapse(); but it doesn't make any effect if comment this line or keep it. Sane result.

Any idea what's wrong? Also there is no error in the console.

Thank you

Upvotes: 3

Views: 3491

Answers (2)

abbya
abbya

Reputation: 21

Adding on to maulik's answer:

If you are using v4, make sure your jquery/bootstrap.min.js is the correct version.

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Upvotes: 2

maulik
maulik

Reputation: 1052

You have missed data-target attribute & not needed to set href tag for a tag.
check below snippet for working code.

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <a class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

Upvotes: 2

Related Questions