javascript - Bootstrap 4 - horizontal aligned accordion - Stack Overflow

admin管理员组

文章数量:1420159

I've been looking for a way to build an accordion in Bootstrap 4 that arranges each panel left to right, instead of top to bottom. Additionally, I'm trying to find a solution that will rotate the clickable headers 90 degrees and to the left of the content.

I've seen this post from a while ago:

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

But none of the solutions appear to be working, or for an accordion. Ideally, the accordion would fill the width of the container and maintain that width. I mocked up what it would look like in two states:

State One

State Two

I've been looking for a way to build an accordion in Bootstrap 4 that arranges each panel left to right, instead of top to bottom. Additionally, I'm trying to find a solution that will rotate the clickable headers 90 degrees and to the left of the content.

I've seen this post from a while ago:

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

But none of the solutions appear to be working, or for an accordion. Ideally, the accordion would fill the width of the container and maintain that width. I mocked up what it would look like in two states:

State One

State Two

• javascript
• html
• css
• bootstrap-4
• accordion

Share Improve this question Follow edited Jun 15, 2019 at 13:24 ElChiniNet 2,91233 gold badges2222 silver badges2828 bronze badges asked Jul 12, 2017 at 20:47 drannosdrannos 8311 silver badge55 bronze badges 3

• I am in a search for such a solution too. I think it will be very useful. – Teddy Markov Commented Jan 18, 2018 at 11:47
• were you ever able to find a solution for this? im currently putting something together but an example would be nice. thx – jgritten Commented Feb 8, 2018 at 21:59
• I found this answer and it def looks what you where looking for – juandiegoles Commented Nov 13, 2018 at 9:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

It is possible to achieve this with some tweaks, but read carefully the requirements before implementing it:

Taking into account that you are using Bootstrap 4, and the minimum supported Internet Explorer version is IE10, you should not have problems using CSS transforms. But it is important to remark, that in this hacky solution I'm using pointer-events, so, you need at least Internet Explorer 11 if you want to avoid closing an already opened element clicking on it.

For this solution, there must be a unique opened element at the beginning (this opened element is used to get its width and apply it to all collapsible contents). Also, the height of the accordion is updated at the beginning, so, as a fixed width and height are applied to the elements, if you want responsiveness, you should update these sizes on each viewport resize. Also, take into account that I'm not using any CSS vendor prefix in the example.

---

Codepen:

https://codepen.io/elchininet/pen/wLMxpB

---

Snippet:

var horizontalAccordions = $(".accordion.width");

horizontalAccordions.each(function() {
  var accordion = $(this);
  var collapse = accordion.find(".collapse");
  var bodies = collapse.find("> *");
  accordion.height(accordion.height());  
  bodies.width(bodies.eq(0).width());
  collapse.not(".show").each(function() {
    $(this).parent().find("[data-toggle='collapse']").addClass("collapsed");
  });
});

.accordion.width {
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.accordion.width .card {
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 1;
  min-width: min-content;
}

.accordion.width .card .card-header {
  cursor: pointer;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.accordion.width .card .card-header:not(.collapsed) {
  pointer-events: none;
}

.collapsing.width {
  transition: width 0.35s ease;
  height: auto;
  width: 0;
}

<link href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="accordion width" id="accordionHorizontalExample">
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseOne">
      Collapsible Group Item 1
    </div>
    <div id="collapseOne" class="collapse show width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseTwo">
      Collapsible Group Item 2
    </div>
    <div id="collapseTwo" class="collapse width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" data-toggle="collapse" data-target="#collapseThree">
      Collapsible Group Item 3
    </div>
    <div id="collapseThree" class="collapse width" data-parent="#accordionHorizontalExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

本文标签： javascriptBootstrap 4horizontal aligned accordionStack Overflow