Using css bootstrap only for accordian

Question

I am working on react-bootstrap accordion and I have prepared a fine working demo. I like the animation of how accordion opens and closes. What is happening here is I am not using bootstrap css in other parts of the project. So that I only need the bootstrap for accordion only. And also bootstrap is affecting the styling of other elements on the page.

Is it possible to use the only CSS of Accordion from the bootstrap.min.css ? Because it seems a little bit unusual to load 156KB of css just for the accordion.

Here is what I have tried

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Accordion, Card, Button } from "react-bootstrap";

function App() {
  return (
    <div className="App">
      <div className="accordion-wrap">
        <Accordion>
          <div className="accordion-header">
            <p>First</p>
            <Accordion.Toggle eventKey="0" className="button">
              click
            </Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div>
              I’m the best thing that ever happened to placeholder text. Some
              people have an ability to write placeholder text... It's an art
              you're basically born with. You either have it or you don't. If
            </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Second</p>
            <Accordion.Toggle eventKey="0" className="button">
              click
            </Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> Lorem </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Third</p>
            <Accordion.Toggle eventKey="0" className="button">
              click
            </Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> hi COntent</div>
          </Accordion.Collapse>
        </Accordion>
      </div>
    </div>
  );
}

export default App;

I have also tried to animate the opening and collapsing of the accordion not with bootstrap but with my custom the css like this, But transition animation does not work when collapsing the accordion.

.collapse {
  height: 0;
  overflow: hidden;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  transition: height 0.2s ease;
}

.show {
  height: auto;
  max-height: 2000px;
}

.collapsing {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  transition: height 0.2s ease;
}

Here is the link to working Demo

Answer 1

default Bootstrap 3 Style

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade.in {
    opacity: 1
}

.collapse {
    display: none
}

.collapse.in {
    display: block
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility
}

Answer 2

I came across to this once and this is my approach. I've changed my custom style with the default Bootstrap 4 Style:

// Accordion component
const Accordion = ({ title, children }) => {
  const [isOpen, setIsOpen] = React.useState(false)
  const [height, setHeight] = React.useState(0)
  const bodyRef = React.useRef(null)
  
  // Get the collapsed body height
  React.useEffect(() => {
    const elementHeight = bodyRef.current.clientHeight
    setHeight(elementHeight)
  }, [])
   
  // inline style
  const collapse = {
    height: 0,
    transition: "height .3s ease"
  }

  const show = {
    height: `${height}px`,
    transition: "height .3s ease"
  }

  return (
    <div className="card">
      <div className="card-header">
        <h2 className="mb-0">
          <button
            className="btn btn-link"
            type="button"
            aria-expanded={isOpen}
            onClick={() => setIsOpen(!isOpen)}
          >
            {title}
          </button>
        </h2>
      </div>
      <div style={isOpen ? show : collapse}>
        <div className="card-body" ref={bodyRef}>
          {children}
        </div>
      </div>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <div className="accordion">
        <Accordion title="Collapsible Item #1">
          <div>
            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.
          </div>
        </Accordion>
        <Accordion title="Collapsible Item #2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt,
            tempore commodi. Totam blanditiis delectus perferendis alias fugiat,
            enim deleniti quaerat, commodi repellendus fuga atque sit dicta
            aperiam iusto, rem placeat.
          </div>
        </Accordion>
      </div>
    </div>
  )
}



ReactDOM.render( <App /> , document.getElementById('root'))

.App {
  font-family: sans-serif;
}

/* default Bootstrap style */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

.accordion > .card {
  overflow: hidden;
}

.accordion > .card:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion > .card:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion > .card > .card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn.focus,
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link.focus,
.btn-link:focus {
  text-decoration: underline;
  box-shadow: none;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Here is a codeSandbox to play with.