openam / bootstrap-responsive-tabs

Bootstrap responsive tabs are tabs that switch to collapsible components (accordions) when resized.
openam.github.io/bootstrap-responsive-tabs
MIT License
132 stars 60 forks source link

Tab content doesn't show in accordion mode #56

Open TheRulisp opened 8 years ago

TheRulisp commented 8 years ago

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?

ryanboland commented 8 years ago

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.

matgreen84 commented 7 years ago

I have got the same problem. Anybody solved it?

lmj0011 commented 7 years ago

What error are any of you getting in the web browser?