-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 that you have read and understand our privacy policy and code of conduct.

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