title: Html: collapse button act as the form submit button in a form
body: <p>I have the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  
    &lt;link rel="stylesheet" type="text/css" href="flags.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css2.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
    &lt;link rel="stylesheet" href="build/css/intlTelInput.css"&gt;
    &lt;script src="google/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;"&gt;
  
  
      &lt;div class="row" style="padding-bottom: 5%;"&gt;
  
  
        &lt;div class="col-lg-offset-1 col-lg-4"&gt;
        &lt;h3 style="color:#00B0F0;"&gt;Choose your phone numbers&lt;h3&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;form action="deuxiemeBis.php" method="POST"&gt;
  
            &lt;div class="row"&gt;
  
              &lt;div class="col-lg-offset-1 col-lg-4"&gt;
  
                &lt;div class="form-group phone1"&gt;
                      &lt;input type="tel" class="form-control" name ="phone1" id="phone1"&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group phone2"&gt;
                      &lt;input type="tel" class="form-control" name ="phone2" id="phone2"&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group phone3"&gt;
                      &lt;input type="tel" class="form-control" name ="phone3" id="phone3"&gt;
                &lt;/div&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
          &lt;div class="row"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;div class="col-lg-offset-1 col-lg-3"&gt;
              &lt;button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;"&gt;+More infos&lt;/button&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;div class="row"&gt;
            &lt;br&gt;
            &lt;div class="form-group col-lg-offset-1 col-lg-6"&gt;
              &lt;div id="demo" class="collapse"&gt;
                &lt;textarea rows="3" name="comment" class="form-control" form="usrform"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;div class="col-lg-offset-9 col-lg-3"&gt;&lt;br&gt;
            &lt;div class="form-group"&gt;
              &lt;button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.</p>
  
  <p><strong>So my question is:</strong> how do you specify that <strong>only</strong> the submit button will actually submit the form ? </p>