コラプス

いくつかのクラスと属性を使用して、プロジェクト全体のコンテンツの表示を切り替えます。

How it works

collapse JavaScript プラグインは、コンテンツの表示と非表示に使用されます。

ボタンやアンカーは、トグルする特定の要素にマッピングされたトリガーとして使われます。

要素を折りたたむと height が現在の値から 0 にアニメーションします。

CSSがアニメーションをどのように扱うかを考えると、collapse 属性に padding 属性を使うことはできません。

代わりに、このクラスを独立したラッピング要素として使用します。

Example

下のボタンをクリックすると、別の要素の表示・非表示を切り替えることができます。

  • .collapseコンテンツを非表示にする
  • .collapse.showコンテンツを表示する
  • .collapsingはトランジションの開始時に追加され、終了時に削除されます。

href属性を持つリンク、または data-bs-target 属性を持つボタンを使用できます。

どちらの場合も、 toggle="collapse" 属性が必要です。

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
 <p>
  <b-button
   margin="e-2"
   color="primary"
   toggle="collapse"
   href="#collapseExample"
  >
   Link with href
  </b-button>
  <b-button
   color="primary"
   toggle="collapse"
   target="#collapseExample"
  >
   Button with target
  </b-button>
 </p>
 <Collapse id="collapseExample">
  <Card>
   <CardBody>
    Some placeholder content for the collapse component. This panel is
    hidden by default but revealed when the user activates the relevant
    trigger.
   </CardBody>
  </Card>
 </Collapse>
</template>

Horizontal

水平方向の折りたたみもサポートしています。

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
vue
<template>
 <p>
  <b-button
   color="primary"
   toggle="collapse"
   target="#collapseWidthExample"
  >
   Button with target
  </b-button>
 </p>
 <div style="min-height: 120px">
  <Collapse
   id="collapseWidthExample"
   horizontal
  >
   <Card>
    <CardBody style="width: 300px">
     This is some placeholder content for a horizontal collapse. It's
     hidden by default and shown when triggered.
    </CardBody>
   </Card>
  </Collapse>
 </div>
</template>

Multiple targets

<Button>または <b-a> は、href属性 または target 属性のセレクターで参照することにより、複数の要素を表示および非表示にすることができます。

複数の <Button>または <b-a> は、それぞれがhrefまたは target 属性で要素を参照する場合、要素を表示および非表示にすることができます

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
 <p>
  <b-button
   color="primary"
   toggle="collapse"
   target="#multiCollapseExample1"
  >
   Toggle first element
  </b-button>
  <b-button
   color="primary"
   toggle="collapse"
   target="#multiCollapseExample2"
  >
   Toggle second element
  </b-button>
  <b-button
   color="primary"
   toggle="collapse"
   target=".multi-collapse"
  >
   Toggle both elements
  </b-button>
 </p>
 <Row>
  <Col>
   <Collapse
    id="multiCollapseExample1"
    class="multi-collapse"
   >
    <Card>
     <CardBody>
      Some placeholder content for the first collapse component of this
      multi-collapse example. This panel is hidden by default but revealed
      when the user activates the relevant trigger.
     </CardBody>
    </Card>
   </Collapse>
  </Col>
  <Col>
   <Collapse
    id="multiCollapseExample2"
    class="multi-collapse"
   >
    <Card>
     <CardBody>
      Some placeholder content for the second collapse component of this
      multi-collapse example. This panel is hidden by default but revealed
      when the user activates the relevant trigger.
     </CardBody>
    </Card>
   </Collapse>
  </Col>
 </Row>
</template>

Methods

MethodDescription
toggle 折りたたみ可能な要素の表示・非表示を切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前に呼び出し元に戻ります。
show 折りたたみ可能な要素を表示します。折りたたみ可能な要素が実際に表示される前に呼び出し元に戻ります。
hide 折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に隠される前に呼び出し元に戻ります。

demo

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
 <b-button
  type="button"
  color="primary"
  @click="showCollapse"
 >
  Show
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="hideCollapse"
 >
  Hide
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="toggleCollapse"
 >
  Toggle
 </b-button>
 <Collapse ref="demoCollapse">
  <Card>
   <CardBody>
    Some placeholder content for the collapse component. This panel is
    hidden by default but revealed when the user activates the relevant
    trigger.
   </CardBody>
  </Card>
 </Collapse>
</template>

<script setup lang="ts">
const demoCollapse = ref(null);
const showCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.show();
 }
};
const hideCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.hide();
 }
};
const toggleCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.toggle();
 }
};
</script>