bootstrap-responsive-tabs
bootstrap-responsive-tabs copied to clipboard
Tab content doesn't show in accordion mode
Hello. I have a problem with responsive tabs. When they aren't in accordion mode they works fine. But if they are, click on element doesn't show tab-content here is the code for tabs0
<ul class="middle-menu nav nav-tabs responsive hidden-xs hidden-sm" id="middleMenuTab">
<li class="active">
<a href="#catalog_middle_link_1" class="catalogLink" data-toggle="tab" id="catalog_middle_link" aria-expanded="true">
Каталог продукции </a>
</li>
<li>
<a href="/promotions-and-discounts">
Акции и скидки </a>
</li>
<li>
<a href="/services">
Услуги </a>
</li>
<li>
<a href="/shipping-and-payment">
Доставка и оплата </a>
</li>
</ul>
And there is the code for tab-content
<div class="tab-content responsive hidden-xs hidden-sm">
<div class="tab-pane active" id="catalog_middle_link_1" style="position: absolute; background: #FFF; z-index: 5000; border: 2px solid #ccc;top: -2px;">
<div class="row middle_catalog_wrapper">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=1">ЛЮСТРЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=9">ТОРШЕРЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=10">СВЕТОДИОДНЫЕ ЛЕНТЫ И КОМПЛЕКТУЮЩИЕ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=13">ГИРЛЯНДЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=14">ПРОЖЕКТОРЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=15">ПОДВЕСЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=16">НОЧНИКИ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=17">НАСТОЛЬНЫЕ ЛАМПЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=21">ТОЧЕЧНЫЕ СВЕТИЛЬНИКИ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=28">ЛАМПОЧКИ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=33">СПОТЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=39">ПОДСВЕТКИ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=45">ФОНАРИКИ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=46">ЭЛЕКТРОУСТАНОВКА</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=53">ТАРЕЛКИ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=54">БРА</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=59">ТРЕКОВЫЕ СИСТЕМЫ</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="/catalog/category?id=60">УЛИЧНЫЕ СВЕТИЛЬНИКИ</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Did I miss something?
I am also having this problem, though it appears to work if the view port is resized. If I load the page at xs or sm and the accordions are initiated, they don't seem to work "clickable" until the viewport is resized.
I have got the same problem. Anybody solved it?
What error are any of you getting in the web browser?