Bootstrap Accordion

by Ayyappan Sakthivadivel

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">

			<div class="sidebar" data-color="blue" data-image="assets/img/IMG_1380b.jpg">

	    <!--   you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->

				<div class="sidebar-wrapper">
					<div class="logo">
						<a href="http://mooring.ucsd.edu" class="simple-text"><h5>Ocean Time-Series Group</h5><h6>at SIO</h6></a>
						<h6 style="font-size:18px">Mini-Mooring Project</h6>
					</div>
					<ul class="nav">
						<li class="active">
							<a href="about.html">
								<i class="pe-7s-info"></i>
								<p>About</p>
							</a>
						</li>
						<li>
							<a href="dataViewer.html">
								<i class="pe-7s-map-marker"></i>
								<p>Data Viewer</p>
							</a>
						</li>
					</ul>
				</div>

			</div>

			<div class="main-panel">

				<nav class="navbar navbar-default navbar-fixed">
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand" href="#">About</a>
						</div>
						<div class="collapse navbar-collapse">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Giving
										<b class="caret"></b>
									</a>
									<ul class="dropdown-menu">
										<li><a href="https://scripps.ucsd.edu/giving/why-give">Why Give</a></li>
										<li><a...

CSS

.panel-heading [data-toggle="collapse"]:after {
        font-family: 'Glyphicons Halflings';
        content: "\e072"; /* "play" icon */
        float: right;
        color: #F58723;
        font-size: 18px;
        line-height: 22px;
        /* rotate "play" icon from > (right arrow) to down arrow */
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .panel-heading [data-toggle="collapse"].collapsed:after {
        /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        color: #454444;
    }