Как сделать развертывание только в одной карточке?

Question

[Skilful221]

<div class="service-block__card" id="card">
            <h1 class="service-block__card-title">Строительство домов</h1>
            <div class="service-block__card-img">
              <img src="img/service/service-1.jpg" alt="service-1">
              <span></span>
            </div>
            <div class="service-block__card-text">
              <p>Какой дом вы хотите иметь? Каменный или деревянный? Вы уже определи ли для себя бюджет будущей застройки?</p>
              <p>Всё строительство условно можно разделить на капитальное и низкобюджетное.</p>
              <p>К низкобюджетному относятся щитовые постройки. Их сложно назвать экологичными и практичными. Мы этого касаться не будем. Наша компания занимается капитальным строительством из бруса, бревна, блоков и кирпича.</p>
              <a href="javascript:void(0)" class="service-block__card-open show">Развернуть</a>
              <div id="var">
                <p>Подробно о ценах в разделе «прайс».</p>
                <p>Если делать сравнительную характеристику стеновых материалов, несомненно, выиграет кирпич. Но в силу дороговизны постройки, уступает своё место блочным материалам: пеноблоку, газобетону и керамзитобетону. Блоки – сравнительно новый материал. Значительно дешевле, не требуют широкой кладки, имеют большие размеры и хорошие эксплуатационные характеристики. За последнее время для строительства загородных домов под ключ в Москве и Подмосковье всё чаще применяются именно блоки.</p>
                <p>Дома из дерева – самое экологичное жильё. Наиболее подходящий вариант для жизни и отдыха.</p>
                <p>Интересует строительство загородного дома под ключ в Подмосковье?</p>
                <p>Мы занимаемся индивидуальными застройками с 2004 года.</p>
                <p>Опыт и профессионализм наших сотрудников к вашим услугам!</p>
                <a href="javascript:void(0)" class="service-block__card-close hide">Свернуть</a>
              </div>
            </div>
          </div>

$('.service-block__card-open').click(function(){
    $(this).next('#var').slideToggle('normal');
    return false;
  });
  $('.service-block__card-close').click(function(){
    $(this).parent('#var').slideToggle('normal');
  });
  $('a.show').on('click', function(){
    $(this).hide();
    return false;
  });
  $('a.hide').on('click', function(){
    $('a.show').slideDown("slow");
    $(this).show();
    return false;
  });

Скрипт в принципе работает, происходит следующее, я нажимаю на развернуть, разворачивается блок, но! у меня этих карточек 5 штук, и проблема в том, что когда допустим 2 карточки развернуты и я нажимаю на "Свернуть" У меня "Развернуть" появляется во всех развернутых карточках, я даже знаю где конь зарыт, вот в этом блоке я пытался через this обратиться именно к одной карточке

$('a.hide').on('click', function(){
    $('a.show').slideDown("slow");
    $(this).show();
    return false;
  });

вот в общем-то, не знаю как облагородить.
ссылка на сайт... для наглядности

Answer 1

[0xD34F]

Сколько может быть элементов с одинаковыми id? - один. Там, где id повторяются, замените их классами.

$('.show').click(function() {
  $(this).hide().next('.var').slideDown().find('.hide').show();
});

$('.hide').click(function() {
  $(this).hide().closest('.var').slideUp().prev('.show').show();
});

Comments

[Skilful221]

да, вы совершенно правы)) спасибо большое, ваш код помог решить задачу!)