Bootstrap手风琴嵌套网格

Question

I've been trying to figure out why the rows are being so close to each other where it should have margin/padding at the bottom of each row.

See the "Area Affected" and the rest of the rows stack below there's no spacing at all unless I put
. If I remove them from the accordion it renders properly means there's spacing in between. Also any idea how to smooth out the page when you hover on the sidemenu it seems slow and stuttering.

http://markestrada.co.uk/cm/ticket/test.php

 <div class="col-md-3"> <!-- Area affected block -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel panel-default">
                            <div class="panel-heading">Area Affected</div>
                            <div class="panel-body">
                                backend login is not working 
                           </div>
                        </div>
                    </div>
                </div><br>
                <div class="row">           
                    <div class="col-md-12">
                        <div class="panel panel panel-default">
                            <div class="panel-heading">Step to replicate issue</div>
                            <div class="panel-body">
                                go to wp-admin
                           </div>
                        </div>
                    </div>
                </div> <br>
                <div class="row">          
                    <div class="col-md-12">
                        <div class="panel panel panel-default">
                            <div class="panel-heading">Urls</div>
                            <div class="panel-body">
                                <a href="#">Ticket live link</a> <br />
                                <a href="#">Internal QA link</a> <br />
                                <a href="#">External QA link</a> <br />
                           </div>
                        </div>
                    </div>
                </div>
            </div> <!-- Area affected block -->

Also the chevron is not working it should go up and down when you click the accordion. https://jsfiddle.net/tjj72mek/

           function toggleChevron(e) {
            $(e.target)
                .prev('.panel-heading')
                .find('i.indicator')
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        }
        $('#accordion').on('hidden.bs.collapse', toggleChevron);
        $('#accordion').on('shown.bs.collapse', toggleChevron); 

Answer 1

<div class="col-md-3"> <!-- Area affected block -->

       <div class="panel panel-default">
           <div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Area Affected</a></div>
           <div class="panel-body">
               backend login is not working 
           </div>

       </div>

       <div class="panel panel-default">
           <div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Step to replicate issue</a></div>
           <div class="panel-body">
               go to wp-admin
           </div>

       </div>

       <div class="panel panel-default">
           <div class="panel-heading"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#detailscollapseOne" aria-expanded="true" aria-controls="detailscollapseOne">Urls</a></div>
           <div class="panel-body">
               <a href="#">Ticket live link</a> <br>
               <a href="#">Internal QA link</a> <br>
               <a href="#">External QA link</a> <br>
           </div>

      </div>