Accordion PBR

Take off the left section

by Brett East

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<link rel="stylesheet" href="https://rendro.github.io/easy-pie-chart/stylesheets/jquery.easy-pie-chart.css">
<script src="https://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js"></script>
<div class="border-center">
		<div class="slide" >
			<div class="col-lg-1"><br><div class=" carousel btn-course-benchmark"> <br>Course <br> Benchmark <br> Pretest </div> </div> 
			<div class="col-lg-1"><br><div class=" carousel btn-chapter"> <br>Chapter 1: <br> Name of <br> Chapter </div> </div> 
			<div class="col-lg-1"><br><div class=" carousel btn-chapter"> <br>Chapter 2: <br> Name of <br> Chapter </div> </div> 
			<div class="col-lg-1"><br><div class=" carousel btn-course-benchmark"> <br>Course <br> Benchmark 1</div> </div>
			<div class="col-lg-1"><br><div class="border-round"><div class=" carousel btn-chapter"> <br>Chapter 3: <br> Name of <br> Chapter </div> </div></div> 
			<div class="col-lg-1"><br><div class=" carousel btn-chapter-thin"> <br>Chapter 4: <br> Name of <br> Chapter </div> </div> 
			<div class="col-lg-1"><br><div class=" carousel btn-chapter-thin"> <br>Chapter 5: <br> Name of <br> Chapter </div> </div>
			<div class="col-lg-1"><br><div class=" carousel btn-course-benchmark-thin"> <br>Course <br> Benchmark 2</div> </div>
			<div class="col-lg-1"><br><div class=" carousel btn-chapter-thin"> <br>Chapter 6: <br> Name of <br> Chapter </div> </div>
		</div>
		</div>

		<style type="text/css">

			


		</style>

CSS

#btn-progression-benchmark {
    background-color: orange;
    color: white;
    width: 80px;
    height: 90px;
    padding: 3px;
    font-size: 10px;
    font-weight: bold;
}
.btn-course-benchmark {
    background-color: #d7eaf6;
    border:#3498db 2px solid;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.btn-course-benchmark-thin {
    background-color: #d7eaf6;
    border:#3498db 1px solid;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.btn-chapter {
    background-color: #d7eaf6;
    border:#3498db 2px solid;
    border-radius: 50%;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.btn-chapter-thin {
    background-color: #d7eaf6;
    border:#3498db 1px solid;
    border-radius: 50%;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.border-round {
    border:1px solid #3498db;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    padding: 4px;
}

.border-center { 
				width: 100%;
				border: red 1px solid;
				position: relative;
			}

.border-center:before { content: '';
			position: absolute;
            bottom: 50%;
			border-bottom: 2px green solid;
			width: 100%;
			z-index:0;
		}

JavaScript

// Benchmark nav-menu settings 
$('.slide').slick({

    slidesToShow: 7,
    slidesToScroll: 7,
    arrows: true,
    dots: true,

});