CODEWITHSUNDEEP
jquerybootstrap-4
Anon Otter
Anon Otter

Reputation: 23

Collapse component not working as expected

I cannot make the collapse component work with Bootstrap 4. I have researched it and found that the problem is often the order in which the script is loaded, but I think my order is fine (jQuery before bootstrap), and I am out of ideas to try to fix this.

Basically, I am trying to make the content-part with the card appear when clicking on the submit button. I appreciate any help, thanks!

Here is my code : 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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>

<div class="container-fluid">
  <div class="top-part">
    <div class="row justify-content-center">
      <h1>Title 1</h1>
    </div>
    <div class="row mt-5 justify-content-center">
      <h4>Input the token below.</h4>
    </div>
    <div class="row mt-3 justify-content-center text-center">
      <form>
        <fieldset class="form-group">
          <input type="text" class="form-control text-center" id="tokenSubmit" placeholder="token">
          <small class="text-muted">Once submitted, please wait a little for the data to load.</small>
        </fieldset>
        <button type="submit" id="submitToken" class="btn btn-success" data-toggle="collapse" data-target="#content-part">Submit</button>
      </form>
    </div>
  </div>

  <div id="content-part" class="collapse">
    <!-- Datasets -->
    <div class="row mt-5 justify-content-center">

      <!-- Card 1 -->
      <div class="col mr-3 ml-5">
        <div class="card">
          <div class="card-header">
            Card 1
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="col mr-3">
        <div class="card">
          <div class="card-header">
            Card 2
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="col mr-3">
        <div class="card">
          <div class="card-header">
            Card 3
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>

      <!-- Card 4 -->
      <div class="col mr-5">
        <div class="card">
          <div class="card-header">
            Card 4
          </div>
          <div class="card-body">
          </div>
        </div>
      </div>

    </div>

    <!-- Card 5 -->
    <div class="row mt-5 justify-content-center">
      <div class="card mr-5 ml-5">
        <div class="card-header">
          Card 5
        </div>
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 56

Answers (2)

Dmitry Leiko
Dmitry Leiko

Reputation: 4372

Use need disabled form, because your form reload page:

<script>
    $('form').submit(function(e){
        e.preventDefault();
    });
</script>

Add this script in footer. I checked it's work fine.

Upvotes: 0

isherwood
isherwood

Reputation: 61036

You have your button as type="submit". This indicates that you want form submission behavior. Just change the type to "button". 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">

    <title>Test Page</title>
  </head>

  <body>

      <div class="container-fluid">

        <div class="top-part">

          <div class="row justify-content-center">
            <h1>Title 1</h1>
          </div>

          <div class="row mt-5 justify-content-center">
              <h4>Input the token below.</h4>
          </div>

          <div class="row mt-3 justify-content-center text-center">
            <form>
              <fieldset class="form-group">
                <input type="text" class="form-control text-center" id="tokenSubmit" placeholder="token">
                <small class="text-muted">Once submitted, please wait a little for the data to load.</small>
              </fieldset>
              <button type="button" id="submitToken" class="btn btn-success" data-toggle="collapse" data-target="#content-part">Submit</button>
            </form>
          </div>

        </div>

        <div id="content-part" class="collapse">

          <!-- Datasets -->
          <div class="row mt-5 justify-content-center">
            <!-- Card 1 -->
            <div class="col mr-3 ml-5">
              <div class="card">
                <div class="card-header">
                  Card 1
                </div>
                <div class="card-body">

                </div>
              </div>
            </div>

            <!-- Card 2 -->
            <div class="col mr-3">
              <div class="card">
                <div class="card-header">
                  Card 2 
                </div>
                <div class="card-body">

                </div>
              </div>
            </div>

            <!-- Card 3 -->
            <div class="col mr-3">
              <div class="card">
                <div class="card-header">
                  Card 3
                </div>
                <div class="card-body">

                </div>
              </div>
            </div>

            <!-- Card 4 -->
            <div class="col mr-5">
              <div class="card">
                <div class="card-header">
                  Card 4
                </div>
                <div class="card-body">

                </div>
              </div>
            </div>

          </div>

          <!-- Card 5 -->
          <div class="row mt-5 justify-content-center">
            <div class="card mr-5 ml-5">
              <div class="card-header">
                Card 5
              </div>
              <div class="card-body">
              </div>
            </div>
          </div>
        </div>

      </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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>

  </body>
</html>

Upvotes: 1

Related Questions