Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshot or Custom Thumbnail

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <div class="overflow mobile-left-menu" style="height: 822px;">
    <div class="products collapse" id="accordion">
                                        <div class="panel ">
<div class="header-deep-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#0" class="here">
                    <div class="header-deep-0__icon">
                <img src="/upload/iblock/264/01_obshchetekhnicheskie-i-estestvenno-nauchnye-distsipliny.svg">
            </div>
            <span class="left-menu-section-name">
            <span style="display: block;">
  							Общетехнические и естественно научные дисциплины</span>
  						</span>
                            <span class="arrow glyphicon glyphicon-chevron-down"></span>
                    </a>
</div>


    <div id="0" class="panel-collapse collapse in">

<div class="panel-body">
<div class="panel-group" id="0_nested">
            <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/fizika">
                                Физика            </a>
    </div><!--/.panel-heading -->
            <div id="1_1" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_fizike_mekhanike_optike" data-level="3" class="link-deep-2">
                                        Лаборатории по физике, механике, оптике                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/fizika_elektrichestvo_i_magnetizm" data-level="3" class="link-deep-2">
                                        Физика-Электричество и магнетизм                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/demonstratsionnoe_oborudovanie_fizika_elektrichestvo_i_magnetizm" data-level="3" class="link-deep-2">
                                        Демонстрационное оборудование "Физика - Электричество и магнетизм"                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tipovoy_komplekt_laboratornogo_oborudovaniya_po_kursu_mekhanika_na_6_rabochikh_mest" data-level="3" class="link-deep-2">
                                        Лабораторное оборудование «Механика» Типовой комплект на 6 рабочих мест                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tipovoy_komplekt_demonstratsionnogo_oborudovaniya_po_kursu_mekhanika" data-level="3" class="link-deep-2">
                                        Демонстрационное оборудование «Механика»                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tipovoy_komplekt_laboratornogo_oborudovaniya_po_kursu_optika_na_6_rabochikh_mest" data-level="3" class="link-deep-2">
                                        Лабораторное оборудование «Оптика» Типовой комплект на 6 рабочих мест                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tipovoy_komplekt_demonstratsionnogo_oborudovaniya_po_kursu_optika" data-level="3" class="link-deep-2">
                                        Демонстрационное оборудование «Оптика»                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tipovoy_komplekt_uchebnogo_oborudovaniya_po_kursu_yadernaya_fizika_na_3_rabochikh_mesta" data-level="3" class="link-deep-2">
                                        Учебное оборудование «Ядерная физика» Типовой комплект на 3 рабочих места                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tipovoy_komplekt_uchebnogo_oborudovaniya_po_kursu_molekulyarnaya_fizika_na_2_rabochikh_mesta" data-level="3" class="link-deep-2">
                                        Учебное оборудование «Молекулярная физика» Типовой комплект на 2 рабочих места                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/datchiki_fizicheskikh_velichin" data-level="3" class="link-deep-2">
                                        Датчики физических величин                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/srednyaya_shkola" data-level="3" class="link-deep-2">
                                        Средняя школа                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/golograficheskoe_oborudovanie" data-level="3" class="link-deep-2">
                                        Голографическое оборудование                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/virtualnye_laboratornye_raboty" data-level="3" class="link-deep-2">
                                        Виртуальные лабораторные работы                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_fizika" data-level="3" class="link-deep-2">
                                        Наглядные пособия - физика                </a>
        </div>
    
                            </div>
        </div>
        </div>
                <div class="panel">
                    <div class="header-deep-1">
                <a class="link-deep-1 link" href="/catalog/cherchenie_ingraf">
            Черчение. Начертательная геометрия. Инженерная графика        </a>
        </div><!--/.panel-heading -->
        </div><!-- /.panel -->
            
            <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/dm">
                                Детали машин            </a>
    </div><!--/.panel-heading -->
            <div id="17_17" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_detalyam_mashin" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по деталям машин                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/i_stendy_trenazhery" data-level="3" class="link-deep-2">
                                        I. Стенды-тренажеры                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/ii_komplekt_tipovykh_planshetov_s_naturalnymi_obraztsami_detaley_i_uzlov_po_kursu_detali_mashin" data-level="3" class="link-deep-2">
                                        II. Комплект типовых планшетов с натуральными образцами деталей и узлов по курсу «Детали машин»                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/iii_uchebno_metodicheskaya_literatura_i_posobiya" data-level="3" class="link-deep-2">
                                        III. Учебно-методическая литература и пособия                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/iv_programmno_metodicheskoe_obespechenie" data-level="3" class="link-deep-2">
                                        IV. Программно-методическое обеспечение                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/v_programmno_metodicheskie_kompleksy" data-level="3" class="link-deep-2">
                                        V. Мультимедийные учебные комплексы                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/vi_naglyadnye_posobiya_detali_mashin" data-level="3" class="link-deep-2">
                                        VI. Наглядные пособия - детали машин                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/tm_tmm_prikl_mekh">
                                Теоретическая, техническая и прикладная механика            </a>
    </div><!--/.panel-heading -->
            <div id="25_25" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_mekhanike" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по механике                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/teoreticheskaya_i_tekhnicheskaya_mekhanika" data-level="3" class="link-deep-2">
                                        Теоретическая и техническая механика                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/teoriya_mashin_i_mekhanizmov" data-level="3" class="link-deep-2">
                                        Теория машин и механизмов                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/prikladnaya_mekhanika" data-level="3" class="link-deep-2">
                                        Прикладная механика                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_po_mekhanike" data-level="3" class="link-deep-2">
                                        Наглядные пособия по механике                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                <a data-toggle="collapse" id="js_scroll_deep_1" data-parent="#0_nested" href="#31_31" class="here in">
                            Сопротивление материалов. Строительная механика            </a>
    </div><!--/.panel-heading -->
            <div id="31_31" class="body-deep-1 panel-collapse collapse in">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye-laboratorii-po-soprotivleniyu-materialov" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по сопротивлению материалов                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/uchebnye_stendy" data-level="3" class="link-deep-2">
                                        Учебные стенды                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/virtualnye_uchebnye_kompleksy" data-level="3" class="link-deep-2">
                                        Виртуальные учебные комплексы                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_sopromat" data-level="3" class="link-deep-2">
                                        Наглядные пособия - Сопромат                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/izmerit_tekhnika">
                                Информационно-измерительная техника            </a>
    </div><!--/.panel-heading -->
            <div id="36_36" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_informatsionno_izmeritelnoy_tekhnike" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по информационно-измерительной технике                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektricheskie_izmereniya_i_osnovy_metrologii" data-level="3" class="link-deep-2">
                                        Электрические измерения и основы метрологии                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/promyshlennye_datchiki" data-level="3" class="link-deep-2">
                                        Промышленные датчики                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/stendy_sistemy_preobrazovateley_datchikov_i_otsifrovki_dannykh_dpo" data-level="3" class="link-deep-2">
                                        Стенды «Системы преобразователей датчиков и оцифровки данных» ДПО                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/izmerenie_davleniya_raskhoda_temperatury" data-level="3" class="link-deep-2">
                                        Измерение давления, расхода, температуры                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_po_informatsionno_izmeritelnoy_tekhnike" data-level="3" class="link-deep-2">
                                        Наглядные пособия по информационно-измерительной технике                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/metrologiya">
                                Метрология. Измерения. Технология машиностроения            </a>
    </div><!--/.panel-heading -->
            <div id="43_43" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_metrologii_tekhnicheskim_i_elektricheskim_izmereniyam_tekhnologii_mashinostro" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по метрологии, техническим и электрическим измерениям, технологии машиностроения                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/osnovy_metrologii_i_elektricheskie_izmereniya" data-level="3" class="link-deep-2">
                                        Основы метрологии и электрические измерения                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/metrologiya_tekhnicheskie_izmereniya_v_mashinostroenii" data-level="3" class="link-deep-2">
                                        Метрология. Технические измерения в машиностроении                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/avtomatizirovannye_sistemy_izmereniya" data-level="3" class="link-deep-2">
                                        Автоматизированные измерительные системы                 </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/izmerenie_raskhoda_davleniya_temperatury" data-level="3" class="link-deep-2">
                                        Измерение расхода, давления, температуры                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/tekhnologiya_mashinostroeniya" data-level="3" class="link-deep-2">
                                        Технология машиностроения                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_metrologiya" data-level="3" class="link-deep-2">
                                        Наглядные пособия - метрология                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/teplotekh">
                                Теплотехника и термодинамика            </a>
    </div><!--/.panel-heading -->
            <div id="51_51" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/uchebnoe_oborudovanie_teplotekhnika" data-level="3" class="link-deep-2">
                                        Учебное оборудование "Теплотехника"                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_teplotekhnika" data-level="3" class="link-deep-2">
                                        Наглядные пособия - теплотехника                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/bzhd">
                                БЖД. Электробезопасность            </a>
    </div><!--/.panel-heading -->
            <div id="54_54" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_bezopasnosti_zhiznedeyatelnosti" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по безопасности жизнедеятельности                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektrobezopasnost_bzhd" data-level="3" class="link-deep-2">
                                        Электробезопасность (БЖД)                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/bezopasnost_zhiznedeyatelnosti" data-level="3" class="link-deep-2">
                                        Безопасность жизнедеятельности                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/okhranno_pozharnaya_signalizatsiya" data-level="3" class="link-deep-2">
                                        Охранно-пожарная сигнализация                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_bzhd" data-level="3" class="link-deep-2">
                                        Наглядные пособия - БЖД                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/himiya">
                                Химия            </a>
    </div><!--/.panel-heading -->
            <div id="60_60" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                <div class="header-deep-2">

                    <a href="/catalog/virtualnye_uchebnye_kompleksy_po_khimii" data-level="3" class="link-deep-2">
                                Виртуальные учебные комплексы по химии            </a>
    </div>
                
                
                
                
                
                
                
                
                
                            <div class="header-deep-2">

                            <a href="/catalog/tekhnologicheskie_protsessy_khimicheskikh_proizvodstv" data-level="3" class="link-deep-2">
                                        Технологические процессы химических производств                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/laboratornye_opyty_po_khimii" data-level="3" class="link-deep-2">
                                        Лабораторные опыты по химии                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/laboratornye_kompleksy_po_khimii_vody" data-level="3" class="link-deep-2">
                                        Лабораторные комплексы по химии воды                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/laboratornye_kompleksy_po_fizicheskoy_khimii" data-level="3" class="link-deep-2">
                                        Лабораторные комплексы по физической химии                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_khimiya" data-level="3" class="link-deep-2">
                                        Наглядные пособия - химия                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/pozharn_bezop">
                                Пожарная безопасность            </a>
    </div><!--/.panel-heading -->
            <div id="76_76" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                <div class="header-deep-2">

                    <a href="/catalog/01_pozharnoe_oborudovanie" data-level="3" class="link-deep-2">
                                01. Пожарное оборудование            </a>
    </div>
                
                
                
                
                        
                
                    <div class="header-deep-2">

                    <a href="/catalog/02_sistemy_pozharnoy_bezopasnosti" data-level="3" class="link-deep-2">
                                02. Системы пожарной безопасности            </a>
    </div>
                
                
                
                
                            <div class="header-deep-2">

                            <a href="/catalog/uchebnye_programmno_metodicheskie_kompleksy_pozharnaya_bezopasnost" data-level="3" class="link-deep-2">
                                        Учебные программно-методические комплексы - пожарная безопасность                </a>
        </div>
    
                    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
<div class="panel ">
<div class="header-deep-0">
            <a data-toggle="collapse" data-parent="#accordion" data-level="1" href="#90">
                        <div class="header-deep-0__icon">
                <img src="/upload/iblock/ca3/02_Электротехника. Радиотехника. .svg">
            </div>
            <span class="left-menu-section-name">
            <span style="display: block;">
  							Электротехника. Электроника. Электромеханика. Электрооборудование</span>
  						</span>
                            <span class="arrow glyphicon glyphicon-chevron-right"></span>
                    </a>
</div>

    <div id="90" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="90_nested">
            <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/et">
                                Электротехника            </a>
    </div><!--/.panel-heading -->
            <div id="91_91" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_elektrotekhnike_i_osnovam_elektroniki" data-level="3" class="link-deep-2">
                                        Электротехника и электроника                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektricheskie_tsepi" data-level="3" class="link-deep-2">
                                        Электрические цепи                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/teoriya_elektricheskikh_tsepey" data-level="3" class="link-deep-2">
                                        Теория электрических цепей                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/teoreticheskie_osnovy_elektrotekhniki" data-level="3" class="link-deep-2">
                                        Теоретические основы электротехники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/osnovy_elektroniki_et" data-level="3" class="link-deep-2">
                                        Основы электроники ЭТ                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektricheskie_tsepi_i_osnovy_elektroniki" data-level="3" class="link-deep-2">
                                        Электрические цепи и основы электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/teoriya_elektricheskikh_tsepey_i_osnovy_elektroniki" data-level="3" class="link-deep-2">
                                        Теория электрических цепей и основы электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/teoreticheskie_osnovy_elektrotekhniki_i_osnovy_elektroniki" data-level="3" class="link-deep-2">
                                        Теоретические основы электротехники и основы электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/osnovy_elektromekhaniki" data-level="3" class="link-deep-2">
                                        Основы электромеханики                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/osnovy_elektromekhaniki_i_elektroniki" data-level="3" class="link-deep-2">
                                        Основы электромеханики и электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektrotekhnika_i_osnovy_elektroniki" data-level="3" class="link-deep-2">
                                        Электротехника и основы электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektrotekhnika_elektronika_elektricheskie_mashiny_i_elektroprivod" data-level="3" class="link-deep-2">
                                        Электротехника, Электроника, Электрические машины и Электропривод                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/elektrotekhnicheskie_materialy" data-level="3" class="link-deep-2">
                                        Электротехнические материалы                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/naglyadnye_posobiya_po_elektrotekhnike_i_osnovam_elektroniki" data-level="3" class="link-deep-2">
                                        Наглядные пособия по электротехнике и основам электроники                </a>
        </div>
    
                            </div>
        </div>
        </div>
        <div class="panel">
    <div class="header-deep-1">
                    <a href="/catalog/el_skhemotekh">
                                Электроника            </a>
    </div><!--/.panel-heading -->
            <div id="106_106" data-level="2" class="body-deep-1 panel-collapse collapse">
        <div class="panel-body">
                        <div class="header-deep-2">

                            <a href="/catalog/gotovye_laboratorii_po_elektronike" data-level="3" class="link-deep-2">
                                        Готовые лаборатории по электронике                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/osnovy_elektroniki" data-level="3" class="link-deep-2">
                                        Основы электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/fizicheskie_osnovy_elektroniki" data-level="3" class="link-deep-2">
                                        Физические основы электроники                </a>
        </div>
    
                    <div class="header-deep-2">

                            <a href="/catalog/analogovaya_elektronika" data-level="3" cl
              
            
!

CSS

              
                .header{
	width: 100%;
  border: none;
	border-color: #fff;
	background-color: white;
	z-index: 99;
	margin-bottom: 0px;
	border-bottom: solid #eee 2px !important;

}
body{
	width: 100%;
	margin: 0 auto;
}
h5{
	font-weight: bold;
	color: #0000ff;
}

.header__logo:hover  {
	text-decoration: none;
}
.header__top  span{
	font-weight: bold;
    color: #2e318b;
    font-size: 10pt;
    line-height: 21px;
}
/* стили для перекривыющие стили bootstrap */
li:focus{
	background: #b2c0f7;
}
.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background: #b2c0f7;
}
/* --------------------------------------- */

@font-face {
    font-family: pt sans;
    src: url(font/pt_sans-regular.ttf);


}
.header__right{
	padding-right: 0;
	padding-left: 0;
	padding-top: 10px;
}

.header__top  li{
	order: 1;
	margin-top: 10px;
	list-style: none;
}

@media (max-width: 1182px) {
	.header__right{
		float: inherit;
		margin: 0 auto;
	}
	.header__logo{

	    margin-left: 40%;
	}
	.header__top .search {
		padding-left: 10px;
	}
}
@media (min-width: 1183px) {
	.navbar-collapse.collapse{
		overflow: hidden !important;
	}
	.logo {
		position: fixed;
		z-index: 99;
		height: 96px;
		border-bottom: solid #ff0000 3px;
		padding-bottom: 16px;
		position: fixed;
	}
	.header__right {
		display: flex !important;
		height: 105px !important;
		align-content: flex-end !important;
		/* flex-direction: column; */
		padding-top: 17px !important;
		flex-wrap: wrap;
	}
}
@media (max-width: 880px) {
	.min-width-880{
		display: none;
	}
}

/*--------------------- МСтили для десктопа ----------------------*/
@media (min-width: 768px){
	.logo {

	}
	.header {
			position: fixed;
			top: 0;
			border-bottom: none;
			min-height: 100px;
	}

	.header__logo{
		padding: 30px 15px, 30px, 0px;
		width: 380px;
	}
	.header__logo > img{
		padding: 5px;
	    width: 60px;
	    float: left;
	margin-left: 10px;
	margin-top: 5px;
	}
	.header__name > h1{
		text-decoration: none;
		padding-top: 10px;
		margin-bottom: 0px;
		width: 200px;
		font-weight: bold;
	    color: #3c3b3b;
	    font-size: 19pt;
	    line-height: 14px;
	    margin-left: 80px;
	    margin-top: 32px;
	}
	.header__name small {
		text-decoration: none;
	    line-height: 12px;
	    font-size: 11pt;
	    color: #3c3b3b;
	    margin: 0 0 0 80px;
	    /* width: 100%; */
	    display: block;
	    /* float: left; */
	    padding: 10px 0 0 0px;
	}
	button {
		font-weight: bold;
	    position: relative;
	    height: 27px;
	    right: 4px;
	    border: 1px #ffd7a3 solid

	}
	.header__top  .bid {
    margin-right: 5px;
    padding-top: 4px;
    width: 82px;
    background: #FFA901;
    font-weight: bold;
    position: relative;
    height: 42px;
    right: 4px;
    text-align: center;
    border-radius: 3px 3px 3px 3px;
	}
	.header__top  .bid a {
		text-decoration: none;
	}
	.header__top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-left: 0;
	}
	.invisible-in-desktop {
		display: none !important;
	}

	.header__top {
		justify-content: space-between;
		padding-left: 0;
	}
	.header__top  input{
		width: 300px;
	}
	.header__top  .search-button{
		outline: none;
		overflow: none;
		padding-left: 0px;
		margin-left: 0px;
		width: 100px;
		display: inline;
	}
	.header__top  li{
		order: 1;
		margin-top: 10px;
		list-style: none;
	}
	.icon {
		display: none;
	}
	.carousel-inner {
		z-index: 2;
	}
	#slider-logo {
		position: absolute;
	    font-size: 22pt;
	    background: #99aaff;
	    padding-left: 30px;
	    z-index: 2;
	    opacity: 0.85;
	    color: #ffffff;
	    border-radius: 0 0 0 90px;
	    height: 90px;
	    text-align: left;
	    vertical-align: -46px;
	    z-index: 3;
	    width: 100%;
	    left: 0;
	    bottom: 0;
	}
}
@media (min-width: 1800px){

  .header__logo {
		width: 500px;
	}
}

/*------------------------Мобильная вёрстка -----------------------------*/
@media (max-width: 767px){
	.header {
		width: 100%;
	}
	.header__right {
		width: 100%;
	}
	.header__logo {
	    float: left;
		margin-left: 0px;
	}
	.header__logo > img {
	    padding: 5px;
	    width: 40px;
	    float: left;
	}
	.header__name {
		width: 180px;
	}
	.header__name > h1 {
		text-decoration: none;
	    width: 130px;
	    font-weight: bold;
	    color: #2e318b;
	    font-size: 10pt;
	    line-height: 89%;
	    margin-left: 42px;
	    margin-bottom: 0px;
	}
	.header__name small {
	    text-decoration: none;
	    line-height: 7px;
	    font-size: 7pt;
	    color: #2e318b;
	    display: block;
	    margin: 4px 0 0 42px;
	}
	.icons {
	    display: block;
	    float: right;
	    padding-right: 10px;
	    margin-top: 20px;
	}
	.icons > button {
		font-size: 6pt;
	}
	.icons > button > img {
		width: 25px;
		height: 25px;
	}
	.icon {
	    border: none;
	    background: none;
	    color: #0000ff;
	    outline: none;
	    padding: 0 0 0 5px;
	    margin: 0;
	}
	.icon > img {
		width: 25px;
    height: 20px;
	}

	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    	background-color: transparent;
	}
	.icon:hover {
	    background-color: transparent;
	}
	.icon:active {
	    background-color: transparent;
	}
	.icon:focus {
	    background-color: transparent;
	}
	.header__logo{
		float: left;
	}
	.header__right {

		padding-top: 0px;
	}
	.header__top {
		border-top: 3px #ff0000 solid;
		padding: 0;
		margin: 0;
	}
	.bid {
		overflow: none;
		border: 1px #ffd7a3 solid;
		width: 100%;
		height: 100%;
		margin: 0;
		color: #2e318b;
		padding: 0;
	}
	.bid a{
		color: #2e318b !important;
	}
	.header__top > li {
		height: 50px;
		margin: 0 0 1px 0;
		text-align: center;
	   	padding: 5px;
		vertical-align: middle;
		font-weight: bold;
		line-height: 1em;
	   	color: #2e318b;
	   	background: #ffd7a3;
	}
	.header__top > li > span {
		font-size: 12pt;
	}
	.invisibl-in-mobile {
		display: none !important;
	}
	.mobile-search-form {
		position: absolute;
	    left: 50%;
	    margin-left: -119px;
	    top: 55px;
	}
	.search-button{
		font-weight: bold;
	    position: relative;
	    height: 25px;
	    right: 4px;
	    border: 1px #ffd7a3 solid;
		overflow: none;
		padding-left: 0px;
		margin-left: 0px;
		width: 100px;
		display: inline;
	}
}




.bx-controls {
    display: none;
}

#bottomRight, #bottomMiddle {
	text-align: center;
	font-size: 1em;
<!--  display: flex; -->
  padding: 0 20px 0 20px;
  justify-content: center;
}
.col-lg-6 > .img-thumbnail {
    float: left;
    margin-right:15px;
}
a img.img-thumbnail {
    float: left;
    margin: 7px;
    border-radius: 0px;
    border-color: #a9a9a9;
}

.cf:before, .cf:after{
    content:"";
    display:table;
}
 
.cf:after{
    clear:both;
}
 
.cf{
    zoom:1;
}    
/* Стили для контейнера формы */
.form-wrapper {
    width: 414px;
}
 
/* Стили поля ввода текста */
 
.form-wrapper input {
    width: 302px;
    height: 30px;
    padding: 10px 5px;
    float: left;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;      
}
 
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
 
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
 
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
 
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    
 
/* Кнопка отправки формы */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 30px;
    width: 112px;
    color: #eee;
    background: #2b79c2;
    border-radius: 0 3px 3px 0;      
}   
   

.form-wrapper button:before { /* стрелка влево */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #2b79c2 transparent;
    top: 8px;
    left: -6px;
}


 
.form-wrapper button::-moz-focus-inner { /* Удаляем дополнительное пространство рядом с кнопкой в Mozilla Firefox */
    border: 0;
    padding: 0;
}    






/*Faq*/
.vopros_otvet .item .otvet {
	display: none;
}
.vopros_otvet .vopros {
    background: #eee;
    color: #333;
    font-size: 17px;
    padding: 10px;
    cursor: pointer;
    margin: 10px 30px 10px 10px;
}
.vopros_otvet .otvet {
	    overflow: hidden;
    display: none;
    border-left: 3px solid rgb(204, 204, 204);
    padding: 5px 0px 5px 9px;
    background: rgb(255, 255, 255);
    margin: 10px 5px;
    font-size: 15px;
}



/*
News*/
#newsContainer .newsContainerItem img {
width: 100%;
height: auto;
}
.newsContainerItem {
text-align: center;
margin-bottom: 25px;
height: 550px;
}
.newsContainerItem .title,
.newsContainerItem .desc {
	max-width: 300px;
	margin: auto;
	text-align: left;
}
.newsContainerItem .title {
    font-size: 17px;
    color: #2b79c2;
    padding-top: 10px;
text-align: center;
    font-weight: bold;
}
.newsContainerItem .title a{
    font-size: 16px;
    color: #2b79c2;
}
.newsContainerItem .title a:hover {
	text-decoration: underline;
}
#newsContainer .image_prewiev {
    height: 300px;
    overflow: hidden;
    width: 300px;
        margin: 10px auto 18px;
    text-align: center;
    border-radius: 40%;
}
#newsContainer .image_prewiev img {
    width: auto;
    height: 100%;
    text-align: center;
    margin: 0;
}


/*Left-nav styles update*/
@media screen and (min-width: 766px){
	#accordion .panel{
		position: relative;
		visibility: visible;
	}
	#accordion .panel .panel-collapse{
		display: none !important;
	}
	#accordion .panel:hover > .panel-collapse{
		display: block !important;
		visibility: visible;
		position: absolute;
		height: auto !important;
		bottom: 0;
		left: 100%;
		z-index: 9999;
		margin-left: 8px;
		border-top: solid 1px rgba(60, 59, 59, 0.36);
		border-left: solid 1px rgba(60, 59, 59, 0.36);
		border-right: solid 1px rgba(60, 59, 59, 0.36);
	}
	#accordion .panel:nth-child(1):hover > .panel-collapse,
	#accordion .panel:nth-child(2):hover > .panel-collapse,
	#accordion .panel:nth-child(3):hover > .panel-collapse,
	#accordion .panel:nth-child(4):hover > .panel-collapse,
	#accordion .panel:nth-child(5):hover > .panel-collapse,
	#accordion .panel:nth-child(6):hover > .panel-collapse,
	#accordion > .panel:nth-child(8) > .panel-collapse .panel:nth-child(1):hover .panel-collapse,
	#accordion > .panel:nth-child(8) > .panel-collapse .panel:nth-child(3):hover .panel-collapse,
	#accordion > .panel:nth-child(6) > .panel-collapse .panel:nth-child(1):hover .panel-collapse{
		top: 0 	!important;
		bottom: 0 !important;
	}
	#accordion .panel:nth-child(6):hover > .panel-collapse .panel-collapse:nth-child(2),
	#accordion .panel:nth-child(7):hover > .panel-collapse .panel-collapse,
	#accordion .panel:nth-child(8):hover > .panel-collapse .panel-collapse,
	#accordion .panel:nth-child(9):hover > .panel-collapse .panel-collapse,
	#accordion .panel:nth-child(10):hover > .panel-collapse .panel-collapse{
		bottom: 0 !important;
		top: auto !important;
	}
	#accordion .panel:hover > .panel-collapse:before{
		content: "";
		display: block;
		height: 100%;
		width: 10px;
		position: absolute;
		top: 0;
		left: -10px;
	}
	.mobile-left-menu.overflow, .mobile-left-menu .products{
		overflow: visible;
	}
	.mobile-left-menu.overflow{
		z-index: 99;
		top: 113px;
	}
	.mobile-left-menu .arrow.glyphicon-chevron-down:before{
		content: "\e080";
	}
	.navbar.header{
		z-index: 100;
	}

	.mobile-left-menu .left-menu-section-name{
		line-height: 1.3;
	}
}
/* Slider main page*/

.slick_slider img {
	max-height: 100%;
    margin: 0px auto;
    max-width: 100%;
}
.slider_tovar {
	position: relative;
}
.slick-next, .slick-prev {
    
    padding: 17px 10px;visibility: visible;
 }

/*
	.mobile-left-menu .header-deep-0 > a{

		padding: 20px 10px; 
	}*/

#widget { 
	display: none !important;
}
@media (min-width: 1901px) {
	.header-deep-0 {
	    height: auto !important;
	    font-size: 15px;
	} 
}
@media screen and (min-width: 766px) and (max-width: 1800px) {
.mobile-left-menu .left-menu-section-name {
    line-height: 1.1 !important;
}
}
@media screen and (min-width: 766px) {
	#accordion .panel {
	    position: relative;
	    visibility: visible;
	    height: 10%;
	}
	.mobile-left-menu.overflow {
	    z-index: 99;
	    top: 113px;
	    height: 100%;
	}
}
.white-popup {
	background: #fff;
    max-width: 400px;
    margin: auto;
    text-align: center;
    padding: 37px;
    font-size: 17px;

}
.jivo-no-transition {
	position: absolute !important;
	left: -1000px !important;
}


.name {
    font-size: 13px;
    text-align: center;
    padding: 0px 13px;
    text-align: center;
    height: 109px;
    vertical-align: sub;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.slider_tovar .slick-list {
	height: 335px;
}
.tabs {
	width: 100%;
}
.tabs div {
    width: 20%;
    background: #e2e2e2;
    float: left;
    text-align: center;
	font-weight:bold;
    padding: 0px 0px 0px 0px;
	padding-top: 1%;
    vertical-align: -webkit-baseline-middle;
    font-size: 15px;
    position: relative;
    height: 46px;
    margin: 0px 0px 21px 0px;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    cursor: pointer;
}
.tabs .active {
    background: rgba(43, 121, 194, 0.38);
}

.tabs .tab_three {

	padding-top: 1%;
}

.tabs_content.tab_one,
.tabs_content.tab_two,
.tabs_content.tab_three,
.tabs_content.tab_four,
.tabs_content.tab_five{
	display: none;
	background: #F2F2F2;
	padding: 20px;
}
.tabs_content.active {
	display: block;
}


.vopros_otvet .vopros{
	padding: 10px 10px 10px 50px;
	position: relative;
}
.vopros_otvet .vopros:before {
	content: '';
	background: url(../images/right-a32.png) no-repeat 0px 0px;
	width: 30px;
	height: 30px;
left: 8px;
    top: 7px;
	position: absolute;

}
.vopros_otvet .item.active .vopros:before {
  -moz-transform: rotate(90deg); /* Для Firefox */
    -ms-transform: rotate(90deg); /* Для IE */
    -webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(90deg); /* Для Opera */
    transform: rotate(90deg);
}
@media (max-width: 650px) {
	.tabs div {
    width: 100%;
    background: #e2e2e2;
    display: block;
	}
} 
/*@media (max-width: 1300px) {
	.tabs .tab_three {
		font-size: 11px;
		vertical-align: bottom;
	}
*/

	.mobile-left-menu .panel {
/*		background: #2B79C2;*/
		border-radius: 0;
	}
} 

.mobile-products {
	color: #2f3790;
    display: table;
    width: 100%;
    height: 50px;
    padding: 0px;
    font-weight: bold;
    background: #b2c0f7;
    line-height: 0.9em;
    margin-bottom: 1px;
    padding: 0 15px 0 15px;
}

.mobile-products span {
	text-align: right;
	display: table-cell;
	vertical-align: middle;
	cursor: pointer;
}
#left-menu-section-name  {
	width: 100%;
	text-align: center !important;
}

.products {
    padding: 0;
    overflow: hidden;
    margin-top: 20px;
    color: #393185;
    float: left;
		height: 100%;
}

.panel {
  margin: 0 !important;
  border: 0;
  padding: 0;
}
.panel-body {
  margin: 0;
  border: 0;
  padding: 0;
}
.panel-group {
  margin: 0;
  border: 0;
  padding: 0;
}
.header-deep-0 {
	width: 100%;
  background: #ffffff;
}
.header-deep-0 > a {
padding: 0px;
	font-weight: bold;
  padding: 5px 15px 5px 15px;
  line-height: 1.5em;
  border-bottom: 2px solid rgb(210, 210, 210);
	border-left: 11px solid #2b79c2;
	border-right: 5px solid rgb(210, 210, 210);
  cursor: pointer;
  display: table;
  width: 100%;
  text-align: left;
  height: 100%;
    text-decoration: none;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -ms-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}

.header-deep-0__icon {
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.header-deep-0 span {
  font-weight: bold;
  text-align: left;
  padding-left: 10px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.header-deep-0 > a:hover {
background: #2b79c2;
color: #eee;
}

.header-deep-1 {
	height: 40px;
  background: rgba(43, 121, 194, 0.13);
  width: 100%;
  margin-bottom: 1px;
  display: table;
	font-weight:bold;
}
.header-deep-1 > a {
  color: black;
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  border-bottom: solid 1px rgba(60, 59, 59, 0.36);
   -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -ms-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
}
.header-deep-1 > a:hover {
background: #2b79c2;
    color: #fff;
}

.body-deep-1 {
	width: 100%;
}


/*.link:hover {
  color: black;
  font-weight: normal !important;
  text-decoration: underline;
}
*/
.header-deep-2 {
  height: 35px;
  width: 100%;
  background: #fff;
  display: table;
	border-bottom: 1px solid rgba(60, 59, 59, 0.36);
}
.header-deep-2 > a {
  width: 100%;
  color: black;
	font-weight:bold;
  background: rgba(43, 121, 194, 0.13);
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
	font-size: 10pt;
webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -ms-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -o-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;

}
.header-deep-2 > a:hover {
background: #2b79c2;
    color: #fff;
}
.header-deep-2 > a.here {
  border: 1px solid #2e318b;
}
.here{
    font-weight: bold;
}
@media (min-width: 766px) {
	.overflow {
		top: 105px;
		width: 380px;
		position: fixed;
		overflow: hidden;
		height: calc(100vh - 100px);
	}
  .products {
		    display: block;
		flex-wrap: wrap;
    padding-bottom: 0;
    visibility: visible !important;
		overflow-y: scroll;
  }
  .panel {
  
		display: flex;
		flex-wrap: wrap;
  }
  .panel-group > .panel {
    width: 360px !important;
  }
}
@media (min-width: 766px) and (max-width: 1183px) {
	.overflow {
		top: 168px;
		height: calc(100vh - 168px);
	}
}
@media (max-width: 767px){
  .header-deep-0 {
    width: 100% !important;
  }
  .mobile-products {
      border-bottom: 2px #ffffff solid;
  }
  .products{
      border-bottom: 3px red solid;
  }
}
/* Слайдер на весь монитор для разрешения 1920px
@media (min-width: 1901px) {
	.overflow {
		width: 500px;
	}
  .panel {
    width: 500px !important;
  }
	.left-menu-section-name {
		line-height: 1em;
		font-size: 1.5em!important;
	}
} */

/* Слайдер на весь монитор для разрешения 1920px вариант 2*/
@media (min-width: 1901px) {
	.overflow { 
		width: 500px;

	}
/* ширина левого меню подстраивается под слайдер*/
 .panel {
    width: 500px !important;
  }
	.header-deep-0 { /* параметры блоков левого меню*/
		height: 86px;
		font-size: 15px;
	}

}




/*Квадратный монитор*/
@media (min-width: 1279px) and (max-width: 1281px) {
	.products {
		display: block !important;
	}
	.header-deep-0 {
		height: 70px;
	}
}
/*@media (min-width: 766px){
	.overflow_bx-panel-style {
		top: 139px;
		height: calc(100vh - 139px);
	}
}
@media (min-width: 765px) and (max-width: 1183px) {
	.overflow_bx-panel-style {
		top: 206px;
		height: calc(100vh - 206px);
	}
}*/
              
            
!

JS

              
                $(document).ready(function(){

  var headDeep1 = $("#js_scroll_deep_1");
  if(headDeep1.length != 0) {
    $('.products').animate({
        scrollTop: headDeep1.offset().top - 100
    }, 1000);
  } else {
    var headDeep2 = $("#js_scroll_deep_2");
    if (headDeep2.length != 0) {
      $('.products').animate({
          scrollTop: headDeep2.offset().top - 100
      }, 1000);
    }
  }

    // var pathname = window.location.pathname;
    // var allLinks = $(".products a").each(function( index ) {
    //   if($(this).attr('href') == pathname) {

    //     $(this).parents('div.collapse').addClass('in');
    //     $(this).parent().parent().find('.collapse').addClass('in');
    //     $(this).closest('.panel').find('.header-deep-1').addClass('here');
    //     var arrow = $(this).parents('.panel')
    //       .find('.arrow')
    //       .removeClass('glyphicon-chevron-right')
    //       .addClass('glyphicon-chevron-down');
    //     $(this).addClass('here');
    //   }
    // });

  $('.mobile-products').on('click', function(){
    if($(this).find(".arrow").hasClass('glyphicon-chevron-right')) {
        $(this).find(".arrow")
          .removeClass('glyphicon-chevron-right')
          .addClass('glyphicon-chevron-down');
      } else {
        $(this).find(".arrow")
          .removeClass('glyphicon-chevron-down')
          .addClass('glyphicon-chevron-right');
      }
    });

  $('.panel-collapse').on('shown.bs.collapse', function(){
  $(this).parent()
    .find(".arrow")
    .removeClass('glyphicon-chevron-right')
    .addClass('glyphicon-chevron-down');
  }).on('hidden.bs.collapse', function(){
  $(this).parent()
    .find(".arrow")
    .removeClass('glyphicon-chevron-down')
    .addClass('glyphicon-chevron-right');
  });




});

              
            
!
999px
How do you comfort a JavaScript bug? You console it!

Console