javascript - Bootstrap accordion show by default on desktop and hide by default mobile

I'm kind of new to Bootstrap so I'm not sure how I'd go about this.

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).

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.

How can I achieve this?

<link rel="stylesheet" href=".3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=".js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=".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>

I'm kind of new to Bootstrap so I'm not sure how I'd go about this.

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.

How can I achieve this?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./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>

Share Improve this question edited Mar 16, 2024 at 20:35 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Jul 26, 2019 at 10:05 Paddy Hallihan 1,7065 gold badges33 silver badges89 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

I have found a solution for this, please check below

CSS for 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 for Mobile

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

HTML structure

<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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap accordion show by default on desktop and hide by default mobile - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)