javascript - Afișarea implicită a acordionului Bootstrap pe desktop și ascunderea implicită pe mobil

Sunt oarecum nou în Bootstrap, așa că nu sunt sigur cum aș proceda în privința asta.

Am un acordeon simplu Bootstrap ca în acest fragment. Este împărțit în mai multe acordeoane pentru că vreau să poată să se extindă și să se restrângă independent unul de celălalt. (adică să poată extinde și să arate toate elementele sau niciunul, nu doar unul extins și celelalte restrânse).

Vreau să dezactivez extinderea și restrângerea pe desktop și să mă asigur că fiecare element este afișat. Dar apoi pe mobil vreau să fie afișat doar primul element, iar celelalte să fie restrânse implicit.

Cum pot realiza asta?

<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading1">
      <button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
        //heading
      </button>
    </div>
    <div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
      <div class="product card-body">
        //content
      </div>
    </div>
  </div>
</div>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading2">
      <button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
        //heading
      </button>
    </div>
    <div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
      <div class="product card-body">
        //content
      </div>
    </div>
  </div>
</div>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading3">
      <button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
        //heading
      </button>
    </div>
    <div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
      <div class="product card-body">
        //content
      </div>
    </div>
  </div>  
</div>

Răspuns #1

Am găsit o soluție pentru aceasta, vă rog să verificați mai jos

CSS pentru desktop

.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%; 
 height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}

CSS pentru mobil

@media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}

Structura HTML

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
      <div class="card-body">Contect-1</div>
    </div>
  </div>
</div>

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
      <div class="card-body">Content-2</div>
    </div>
  </div>
</div>

<div class="accordion modified-accordion">
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
      <div class="card-body">Content-3</div>
    </div>
  </div>
</div>