Bootstrap Nav Tabs не работает с динамическим контентом

Question

Я пытаюсь получить динамический контент на вкладках, но он не работает так, как предполагалось:

here is my codes

                                <div class="col-md-3">
<ul class="nav nav-tabs">
@foreach($faqs as $count => $faq)
<li role="presentation" @if($count == 0) class="active" @endif>
    <a href="#{{$faq->id}}" aria-controls="#{{ $faq->id }}" role="tab" data-toggle="tab">{{ $faq->title }}</a>
</li>
@endforeach
</ul>
                                </div><!--end col-3-->

                                <div class="col-md-9">
<div class="tab-content">
@foreach($faqs as $count => $faq)
<div @if($count == 0) class="tab-pane active" @else class="tab-pane" @endif id="{{$faq->id}}">
@foreach($faq->subfaqs as $subs)
<div class="panel-group" role="tablist" aria-multiselectable="true" id="#{{$subs->id}}">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a href="#{{$subs->id}}" data-toggle="collapse"><i class="fa-icon fa fa-arrow-circle-o-up"></i>{{$subs->title}}</a>
            </h4>
        </div>

        <div id="{{$subs->id}}" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                {!!$subs->body!!}
            </div>
        </div>
    </div>
</div>
@endforeach
</div>
@endforeach
</div>
                                </div><!--end col-9-->

и мой script

<script type="text/javascript">
  $('.collapse').collapse("show");
</script>

Вопросы

1. Мои вкладки <li> не загружаются (всегда загружается моя первая вкладка)
2. Мой выпадающий список collapse не работает (не могу открыть / закрыть их)