<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="specification-area"> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="accordion"> <div class="card"> <div class="card-header "> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Specifications <i class="fa fa-angle-down fa-2x pull-right"></i></a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel. Donec vel mauris quam.</p> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Engine <i class="fa fa-angle-down fa-2x pull-right"></i> </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> <table class="table-specifications table table-striped table-hover"> <tbody> <tr> <td>Engine type</td> <td>SKYACTIV-G 2.5 L DOHC 16-valve 4-cylinder engine with VVT</td> </tr> <tr> <td>Displacement</td> <td>2,488 cc</td> </tr> <tr> <td>Compression ratio</td> <td>13.0:1</td> </tr> <tr> <td>Horsepower SAE net</td> <td>184 @ 5,700 rpm</td> </tr> <tr> <td>Torque SAE net lb. ft.</td> <td>185 @ 3,250 rpm</td> </tr> <tr> <td>Fuel system</td> <td>Direct injection</td> </tr> <tr> <td>Recommended fuel</td> <td>Regular</td> </tr> <tr> <td>Fuel economy city/highway (L/100 km)*<br>Manual<br>Automatic</td> <td>8.1/5.3<br>7.6/5.1</td> </tr> <tr> <td>Curb weight (kg)<br> Manual<br>Automatic</td> <td>1,442<br>1,465</td> </tr> </tbody> </table> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Exterior <i class="fa fa-angle-down fa-2x pull-right"></i> </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> <table class="table-specifications table table-striped table-hover"> <tbody> <tr> <td>Wheelbase/overall length (mm)</td> <td>2,830/4,895</td> </tr> <tr> <td>Overall width (mm)</td> <td>1,840</td> </tr> <tr> <td>Overall height (mm)</td> <td>1,450</td> </tr> <tr> <td>Track (fr/rr) (mm)<br>17" wheels<br>19" wheels</td> <td>1,585/1,575<br>1,595/1,585</td> </tr> <tr> <td>Turning circle, curb-to-curb (m)</td> <td>11.2</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div>