title: bootstrap accordion show by default on desktop and hide by default mobile
body: <p>I'm kind of new to bootstrap so I'm not sure how I'd go about this.</p>
  
  <p>I have a simple bootstrap accordion like in this snippet. It is split into multiple accordions because I want them to be able to expand and collapse independently from each other. (as in can expand and show all items or none, not just one expanded and the others collapsed)</p>
  
  <p>I want to disable the expanding and collapsing on desktop and make sure each item is shown. But then on mobile I only want to have the first item shown and the others collapsed by default.</p>
  
  <p>Any suggestions on how I could achieve this would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div id="accordion"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-header" id="heading1"&gt;
        &lt;button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1"&gt;
          //heading
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion"&gt;
        &lt;div class="product card-body"&gt;
          //content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="accordion"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-header" id="heading2"&gt;
        &lt;button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2"&gt;
          //heading
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion"&gt;
        &lt;div class="product card-body"&gt;
          //content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="accordion"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-header" id="heading3"&gt;
        &lt;button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3"&gt;
          //heading
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion"&gt;
        &lt;div class="product card-body"&gt;
          //content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>