0

Помогите пожалуйста! Получается эффект аккордеона, при нажатии на ссылку появляется section потом, при нажатии на ссылку ниже открывается другой section а предыдущий закрывается.

Подскажите что нужно добавить чтобы и сама ссылка скрывалась при нажатии на неё а при нажатии на другую ссылку она появлялась, также как и section.

есть такой html

<ul class="vac-list">
  <li>
    <a href="#" class="vac-show"></a>
    <section>12</section>
  </li>
  <li>
    <a href="#" class="vac-show"></a>
    <section>34</section>
  </li>
  <li>
    <a href="#" class="vac-show"></a>
    <section>56</section>
  </li>
  <li>
    <a href="#" class="vac-show"></a>
    <section>78</section>
  </li>
</ul>

и JS скрипт

(function($) {

  var allPanels = $('.vac-list section').hide();

  $('.vac-list .vac-show').click(function() {
    allPanels.slideUp();
    $(this).siblings('section').slideDown();
    return false;
  });

})(jQuery);

Получается эффект аккордеона, при нажатии на ссылку появляется section потом, при нажатии на ссылку ниже открывается другой section а предыдущий закрывается.

Подскажите что нужно добавить чтобы и сама ссылка скрывалась при нажатии на неё а при нажатии на другую ссылку она появлялась, также как и section.

Буду очень признателен.

1 ответ 1

0

Если я вас правильно понял, то вот так

 (function($) {
    var $vac_list = $(".vac-list"),
        $section  = $vac_list.find("section"),
        $all_li   = $vac_list.find("li"),
        $show     = $vac_list.find(".vac-show");

    $show.click(function() {
        var $this       = $(this),
            $this_block = $this.parents("li").find("section");

        // Сворачиваем всё открытое
        $section.slideUp();

        // Показываем скрытую кнопку
        $show.removeClass("hidden");

        // Скрываем кнопку
        $this.addClass("hidden");

        // Разворачиваем нужное
        $this_block.slideDown();

        return false;
    });

})(jQuery);

Подробнее тут https://jsfiddle.net/ragjy83w/1/

1
  • Спасибо, все работает!
    – mangoloid1
    5 июл 2015 в 7:04

Ваш ответ

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

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