Search the Community
Showing results for tags 'Аккордеон'.
Found 4 results
-
суть проблемы: создано два элемента - Аккордеон с 3 раскрывающимися пунктами и кнопка при нажатии на которую происходит так же раскрытие дочернего элемента. все работает исправно но если я в html, код аккордеона расположу над кодом кнопки то при открытии элемента аккордеона кнопка сместится вниз и наоборот. мне нужно это исправить любым способом. ошибок в коде нет мне просто нужен вариант.
-
У меня стоит простой бутстраповский аккордеон, при нажатии открывается одна и закрывается другая скрытая информация. Но есть проблема, когда в скрытом содержимом большое количество информации, при попытке открытии следующей, аккордеон сдвигается наверх. Нужен скрипт для фиксированного заголовка аккордеона. Смогли бы вы помочь с этим? Cнизу код html <div class="panel-group accordion" id="panel-651270"> <div class="panel panel-default"> <div id="yazyk-kurs" class="panel-heading"> <i class="fa fa-globe fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-366587" > Языковые курсы </a> </div> <div id="panel-element-366587" class=" panel-collapse collapse"> <div class="panel-body "> <table align="center" class="table table-bordered table-hover table-condensed col-xs-12" > <thead> <tr class="info" align="center" valign="middle"> <th align="center" valign="middle">Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Английский язык <br> <small>(I уровень)</small></td> <td><small>182 учебных часа <br> 4 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>698</td></tr> <tr> <td> Английский язык <br> <small>(II-VI уровень)</small></td> <td><small>142 учебных часа <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>546</td></tr> <tr> <td> Практический курс Английского языка <small>(I уровень)</small></td> <td><small>72 учебных часа <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>276</td></tr> <tr> <td> Практический курс Английского языка <small>(II-VI уровень)</small></td> <td><small>144 учебных часа <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>553</td></tr> <tr> <td> Английского языка для работников Банка </td> <td><small>122 учебных часа <br> 3 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>468</td></tr> <tr> <td> Туркменский язык, Французский язык, <br> Арабский язык <small>(I-III уровень)</small> </td> <td><small>142 учебных часа <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>545</td></tr> <tr> <td> Русский язык<br> <small>(I-II уровень)</small> </td> <td><small>160 учебных часов <br> 4 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>615</td></tr> <tr> <td> Немецкий язык<br> <small>(I-IV уровень)</small> </td> <td><small>180 учебных часов <br> 4 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>691</td></tr> <tr> <td> Китайский язык<br> <small>(I уровень)</small> </td> <td><small>148 учебных часов <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>568</td></tr> <tr> <td> Китайский язык<br> <small>(I-III уровень)</small> </td> <td><small>136 учебных часов <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>523</td></tr> <tr> <td> Турецкий язык<br> <small>(I уровень)</small> </td> <td><small>72 учебных часа <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>276</td></tr> <tr> <td> Турецкий язык<br> <small>(II уровень)</small> </td> <td><small>68 учебных часов <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>261</td></tr> <tr> <td> Персидский язык<br> <small>(I-II уровень)</small> </td> <td><small>74 учебных часа <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>284</td></tr> </body> </table> </div> </div> </div> <div class="panel panel-default"> <div id="komp-kurs" class="panel-heading"> <i class="fa fa-desktop fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-435532">Основы компьютерных технологий</a> </div> <div id="panel-element-435532" class="panel-collapse collapse"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed col-xs-12"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Microsoft Windows; Microsoft Office: Word, Excel, PowerPoint, Internet</td> <td><small>86 учебных часов <br> 1,3 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td><td>403</td></tr> <tr> <td> Техническое обслуживание и настройка ПЭВМ</td> <td><small>72 учебных часа <br> 1,2 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td><td>338</td></tr> <tr> <td> Adore PhotoShop</td> <td><small>42 учебных часа <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>197</td></tr> <tr> <td> CorelDraw</td> <td><small>48 учебных часа <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>252</td></tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag--> <div class="panel panel-default"> <div id="programming" class="panel-heading"> <i class="fa fa-code fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-4355321">Программирование</a> </div> <div id="panel-element-4355321" class=" panel-collapse collapse"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed col-xs-12"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr><td> Программирование на С/С++ </td> <td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td><td> 704 </td></tr> <td>Программирование в HTML</td><td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td><td>704</td></tr> <tr><td> Программирование на C# и в среде NET</td> <td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td> <td>704</td></tr> <tr><td>Программирование на Java и JavaScript</td> <td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td><td>704</td> </tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag--> <div class="panel panel-default"> <div id="intellekt-kurs" class="panel-heading"> <i class="fa fa-connectdevelop fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-4355322">ИНТЕЛЛЕКТУАЛЬНОЕ РАЗВИТИЕ</a> </div> <div id="panel-element-4355322" class="-collapse collapse"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Техника быстрого чтения <small>(I уровень)</small> </td> <td><small>48 учебных часов <br> 1 месяц. 12 ч. в неделю. <br> 4-5 раз по 3 уч.ч. </small><td>200</td></tr> <tr> <td> Техника быстрого чтения <small>(II уровень)</small> </td> <td><small>132 учебных часа <br> 3 месяц. 12 ч. в неделю. <br> 4-5 раз по 3 уч.ч. </small></td><td>550</td></tr> <tr> <td> Ораторское искусство</td> <td><small>54 учебных часа <br> 1,5 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>225</td></tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag--> <div class="panel panel-default"> <div id="psychology-kurs" class="panel-heading"> <i class="fa fa-graduation-cap fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-4355323">ПСИХОЛОГИЯ И ПЕДАГОГИКА</a> </div> <div id="panel-element-4355323" class="panel-collapse collapse st-content"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Практическая психология </td> <td><small>220 учебных часов <br> 3 месяц. 20 ч. в неделю. <br> 5 раз по 4 уч.ч. </small></td> <td>900</td></tr> <tr> <td> Повышение квалификации педагогических кадров системы среднего профессионального образования</td><td><small>142 учебных часа <br> 2 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td> <td>590</td></tr> <tr> <td> Этика и культура делового общения </td><td><small>36 учебных часов <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td> <td>150</td></tr> <tr> <td> Псилого-педагогический курс "ПРАКТИЧЕСКАЯ ПСИХОЛОГИЯ ДЛЯ ПОДРОСТКОВ" </td> <td><small>62 учебных часа <br> 2 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>258</td></tr> <tr> <td> Псилого-педагогический курс "ПРАКТИЧЕСКАЯ ПСИХОЛОГИЯ ДЛЯ РОДИТЕЛЕЙ" <small>(I-II уровень)</small> </td> <td><small>56 учебных часов <br> 1,5 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>233</td></tr> <tr> <td> Псилого-педагогический курс "ПРАКТИЧЕСКАЯ ПСИХОЛОГИЯ ДЛЯ РОДИТЕЛЕЙ" <small>(III-IV уровень)</small> </td> <td><small>48 учебных часов <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>200</td></tr> <tr> <td> Социально-Психологический курс "СЕМЬЯ" </td><td><small>270 учебных часов <br> 7,5 месяцев. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td> <td>1123</td></tr> <tr id="sekret_referent"> <td> Курс "СЕКРЕТАРЬ-РЕФЕРЕНТ" </td> <td><small>82 учебных часа <br> 1,5 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td><td>315</td></tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag-->
-
Здравствуйте! Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (collapse.js). Штука весьма полезная и очень удобная. Но вот кое какой функционал не доведен до ума. А именно возможность перехода к нужному развернутому слою, и дальнейшей работе с меню аккордеона. Подробнее: есть страница (PAGE1) на которой 10 кнопок и 10 слоев. Слои имеют id по порядку (el1, el2, el3, el4, el5 и т.д.). Есть кнопки которые открывают эти слои (Салаты, Супы, Гарниры ...). Есть другая страница, на которой есть ссылки типа: /PAGE1/?menu=sreda#el3. Надо что бы при переходе с этой страницы на PAGE1 открылся элемент 3. решение такое существует и работает. Извлекает хэш и открывает нужный слой, если хэш пустой, то открывает первый слой. <script> $(function(){ var hash = window.location.hash; $('.panel-collapse').hide(); $('.panel-collapse').each(function(){ $(this).removeClass('in'); }); if (hash) { $(hash).show().addClass('in'); } else { $('#el1').show().addClass('in'); } }); </script> Но после перехода не работает меню на странице. Т.к. URL имеет вид /PAGE1/?menu=sreda#el3, то 3 слой всегда открыт. А остальные слои просто не работают. Прошу вашей помощи, доработать так, что бы и нужный слой открывался, и все остальное на странице после этого работало. Спасибо.
-
Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки). Все работает кроме класса ".accordion-arrow", этот класс подразумевает под собой стрелку которая находится рядом с заголовком одного из 3х элементов и меняется в зависимости от состояния радио-инпута. Стрелка есть, но на всех элементах она отображается как "не-активная". т.е. когда элемент чекнутый, стрелка не меняется.
