Bootstrap Accordion

by SHELDON PASCIAK

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1 class="text-center">
    Quick Id: #1
</h1>
<h3>
    Title: Java Fundamentals Definitions
</h3>

<div class="container">

    <div class="row">
        <div class="col-lg-9 mx-auto">
            <!-- Accordion -->
            <div id="accordionExample" class="accordion shadow">

                <!-- Accordion item 1 -->
                <div class="card">
                    <div id="headingOne" class="card-header bg-white shadow-sm border-0">
                        <h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseOne"
                                aria-expanded="true" aria-controls="collapseOne"
                                class="d-block position-relative text-dark collapsible-link py-2 bg-success">Question ID
                                #31 - JFOP easy question <span>&nbsp;</span></a></h6>
                    </div>
                    <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample"
                        class="collapse show">
                        <div class="card-body p-5">
                            <hr>
                            <span>Mark as...</span><button class="btn btn-success border">
                                +
                            </button><button class="btn btn-warning border">
                                -
                            </button><button class="btn btn-danger border">
                                x
                            </button>
                            <hr>
                            <p...

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
/* Horizontal line */



.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}


/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/