-1

Здравствуйте. Помогите сделать так что бы при открытие нового контента закрывался уже открытый. пример вот тут http://pcvector.net/uploads/demo/scripts/accordion/akordeon/index.html можно посмотреть если не поняли) первый вариант где после открытия нового контента, открытый закрывается)

А вот сам код моего аккордеона, вот его и надо мне переделать что бы работала такая функция

jQuery('.toggle').toggle(function(){ jQuery(this).addClass('active'); },function(){ jQuery(this).removeClass('active'); });
  jQuery('.toggle').click(function(){ jQuery(this).next('.toggle-content').slideToggle(); });
  jQuery('.toggle-frame-set').each(function(){
    var $this = jQuery(this),
    $toggle = $this.find('.toggle-accordion');

    $toggle.click(function(){
      if( jQuery(this).next().is(':hidden') ) {
        $this.find('.toggle-accordion').removeClass('active').next().slideUp();
        jQuery(this).toggleClass('active').next().slideDown();
      }
      return false;
    });

    //Activate First Item always
    $this.find('.toggle-accordion:first').addClass("active");
    $this.find('.toggle-accordion:first').next().slideDown();
  });

разметка:

<div class="toggle-frame-set" style="margin-top:-30px;">
                    <div class="toggle-frame">
                        <h5 class="toggle"> <a href="#" title=""> <span class="what_qust">?</span>Чем занимается проект за рамками сайта ? </a> </h5>
                        <div class="toggle-content">
                            <p> Тут текст </p>
                        </div>
                    </div>
                    <div class="toggle-frame">
                        <h5 class="toggle"> <a href="#" title=""><span class="what_qust">?</span>Чем занимается проект за рамками сайта ?</a> </h5>
                        <div class="toggle-content">
                            <p> Тут текст                
 </p>
                        </div>
                    </div>
                    <div class="toggle-frame">
                        <h5 class="toggle"> <a href="#" title=""><span class="what_qust">?</span>Чем занимается проект за рамками сайта ?</a> </h5>
                        <div class="toggle-content">
                            <p> тут текст </p>
                        </div>
                    </div>
               </div>

Помогите пожалуйста) я не особо в jQuery разбираюсь)

1 ответ 1

2

Вообще Jquery JQuery аккордион по умолчанию работает именно так как вам надо, или вы свой аккордион создаете?

Для вашей верстки будет достаточно скрипта:

  jQuery('.toggle').click(function(){ 
      jQuery('.toggle-content').slideUp();
      jQuery(this).next('.toggle-content').slideToggle(); 
  });

//Activate First Item always
  $('.toggle:first').click();
.toggle-content{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="toggle-frame-set" >
                    <div class="toggle-frame">
                        <h5 class="toggle"> <a href="#" title=""> <span class="what_qust">?</span>Чем занимается проект за рамками сайта ? </a> </h5>
                        <div class="toggle-content">
                            <p> Тут текст </p>
                        </div>
                    </div>
                    <div class="toggle-frame">
                        <h5 class="toggle"> <a href="#" title=""><span class="what_qust">?</span>Чем занимается проект за рамками сайта ?</a> </h5>
                        <div class="toggle-content">
                            <p> Тут текст                
 </p>
                        </div>
                    </div>
                    <div class="toggle-frame">
                        <h5 class="toggle"> <a href="#" title=""><span class="what_qust">?</span>Чем занимается проект за рамками сайта ?</a> </h5>
                        <div class="toggle-content">
                            <p> тут текст </p>
                        </div>
                    </div>
               </div>

css устанавливает начальное состояние контента как скрытое

в onclick сначала скрываем все элементы с классом toggle-content $(toggle-content') а потом открываем тот что следует за элементом, который кликнули $(this).next()

3
  • У меня сейчас по этому коду он работает не закрывая открытый контент. Мне нужно этот код изменить и сделать так что бы при открытие нового контента закрывался уже открытый контент. 6 мая 2015 в 18:05
  • Проблема в том что ваш код идет без контекста, и тут очень проблематично понять что происходит, создайте на fiddle пример, чтоб вместе с разметкой было, а то что это за .toggle-frame-set .toggle-active toggle и опишите, что вы сделали для того что-бы "закрывался уже открытый" это же вопрос-ответ ресурс
    – skazska
    6 мая 2015 в 18:16
  • Исправил пост, добавил разметку посмотрите пожалуйста. 6 мая 2015 в 18:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.