Изготовление дивы скользить вниз (не открывается) при открытии DIV выше

Question

Так вот мой вопрос - и я не слишком хорошо разбирается в программировании только еще, поэтому, пожалуйста, будьте терпеливы:

Я хотел бы иметь список объектов на моей странице, каждый из которых работает как переключатель, чтобы открыть div. Эта часть у меня есть! Я не могу понять, как сделать так, чтобы divs ниже открытого объекта скользили ниже вновь открытого div. В настоящее время они просто сидят там наверху контента в пределах открытого div. Благодаря!

Answer 1

Его называют аккордеонным эффектом. Проверьте jQuery UI Accordion Effect here

Here Это очень простая версия эффекта аккордеона, я только что создал его с помощью jQuery.

Answer 2

Эффект, о котором вы спрашиваете, уже доступен через javascript-библиотеку jQuery. Абстракция jQuery ui обеспечивает эффект accordion.

От jqueryui.com:

<!-- this is the format of the html markup needed --> 
<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

и

<script> 
    //and the JavaScript code for it 
     $(function() { 
     $("#accordion").accordion(); 
    }); 
</script> 

Answer 3

Пожалуйста, не используйте JQuery UI, если это только для небольшого проекта. Вы можете использовать обычный способ закрыть все панели, которые были открыты, когда триггер щелкнул и откройте панель, которая ближе всего к следующей кнопке:

$(function() { 
    // Hide all panels 
    $('#accordion .content').hide(); 
    // Add active class to the first trigger, then find the next panel and open with .slideDown() effect 
    $('#accordion h2:first').addClass('active').next().slideDown('slow'); 
    // When the trigger is clicked... 
    $('#accordion h2').click(function() { 
     if($(this).next().is(':hidden')) { 
      // Remove all "active" classes and close all the panels that has been opened. 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
      // Open one panel that placed right next to the trigger 
      // only if the next panel is hidden 
      $(this).toggleClass('active').next().slideDown('slow'); 
     } 
    }); 
}); 

Вот пример: http://jsfiddle.net/tovic/CzE3q/ Надеюсь, что это поможет :)