Jump to content
  • 0

Скроллинг при нажатии на заголовок (вертикальный аккордеон)

guumee

Asked by guumee,

 Share

Question

guumee Explorer

guumee

Posted
Posted (edited)

У меня стоит простой бутстраповский аккордеон, при нажатии открывается одна и закрывается другая скрытая информация. Но есть проблема, когда в скрытом содержимом большое количество информации, при попытке открытии следующей, аккордеон сдвигается наверх. Нужен скрипт для фиксированного заголовка аккордеона. Смогли бы вы помочь с этим? 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-->

 

Edited by guumee
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • SHADOWtop1gg
      аккордеон
      By SHADOWtop1gg
      суть проблемы: создано два элемента - Аккордеон с 3 раскрывающимися пунктами и кнопка при нажатии на которую происходит так же раскрытие дочернего элемента. все работает исправно но если я в html, код аккордеона расположу над кодом кнопки то при открытии элемента аккордеона кнопка сместится вниз и наоборот. мне нужно это исправить любым способом. ошибок в коде нет мне просто нужен вариант.
       
    • Blend1n
      Почему Bootstrap переносит айтем на следующую колонну
      By Blend1n
      Изначально айтемы стояли на своих местах, но когда я добавил больше текста, то получилась вот такая картина.
      На втором скриншоте показано то, как должны стоять айтемы.
    • fiver
      Открытие слоя (collapse) в bootstrap по хэш
      By fiver
      Здравствуйте!
      Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (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 слой всегда открыт. А остальные слои просто не работают.
      Прошу вашей помощи, доработать так, что бы и нужный слой открывался, и все остальное на странице после этого работало.
      Спасибо.
    • evanre
      Псевдокласс :checked
      By evanre
      Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки).
       
      Все работает кроме класса ".accordion-arrow", этот класс подразумевает под собой стрелку которая находится рядом с заголовком одного из 3х элементов и меняется в зависимости от состояния радио-инпута.

      Стрелка есть, но на всех элементах она отображается как "не-активная". т.е. когда элемент чекнутый, стрелка не меняется.
    • uasite
      вставить слайдер в друпал
      By uasite
      есть тема на бутстрап
      в ней слайдер карусель и пару всплывающих ефектов
      нужно чтоб они работали в среде друпал 7
       
      у меня не получилось вроде все подгрузил но анимации нет
      разбираться нет времени сейчас
      если кто может помочь предлогайте цену с указанием времени
       
      сам шаблон
      http://treba.info/hotel-theme/
       
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept