Как переходя по ссылке с главной страницы открывать нужную вкладку аккордеона на внутренней?

Question

[dima_maketov]

Добрый день!
Скорее всего не понятно по названию, что необходимо, поэтому попробую объяснить примером:
Это главная страница, на которой есть несколько вариаций услуг

При переходе по ссылке "Перевод документации", пользователя перекидывало на страницу "Письменного перевода"
с открытой вкладкой аккардеона:

Как можно сделать так, чтобы при переходе по ссылке скрипт понимал, какую вкладку аккардеона нужно открыть?

Answer 1

[iBird Rose]

делаешь у ссылок акордионов якоря, а потом через js обрабаываешь window.location.hash

Answer 2

[dima_maketov]

Спасибо за ответы, возможно кому-то понадобиться, реализовал так:
Главная страница, где есть ссылки:

<div class="link_list first_answ">
						<a href="/pismennyi-perevod.html#perevod-dokumentacii" class="service_name">Перевод документации</a>
						<a href="/pismennyi-perevod.html#korrektirovka" class="service_name">Корректировка документов</a>
						<a href="/pismennyi-perevod.html#redaktirovanie" class="service_name">Редактирование документов<br>(носителями языка) </a>
						<a href="/pismennyi-perevod.html#verstka" class="service_name">Верстка</a>
						<a href="/pismennyi-perevod.html#reraiting" class="service_name">Рерайтинг</a>
						<a href="/pismennyi-perevod.html#transkribirovanie" class="service_name">Транскрибирование</a>
						<a href="/pismennyi-perevod.html#notarialnoe-zaverenie" class="service_name">Нотариальное заверение<br>переводов </a>
						<a href="/pismennyi-perevod.html#dostavka-raspechatka" class="service_name">Доставка и распечатка<br>документов </a>
					</div>

Внутрення, где аккардеон:

<a href="#" class="service_name_item" data-name="perevod-dokumentacii">Перевод документации</a>
							<div class="service_content_item">
								<p><strong>Перевод документации</strong><br>Мы предлагаем перевод технической, медицинской, юридической и иной документации высококвалифицированными профильными специалистами.</p>
								<a href="#order" class="button magnific-popup blue_button" data-theme="Перевод документации">Получить консультацию по&nbsp;услуге</a>
							</div>
							<a href="#" class="service_name_item" data-name="korrektirovka">Корректировка документов</a>
							<div class="service_content_item">
								<p><strong>Корректировка документов</strong><br>Корректировка документа с целью устранения грамматических, орфографических, синтаксических ошибок, технических погрешностей</p>
								<a href="#order" class="button magnific-popup blue_button" data-theme="Корректировка документов">Получить консультацию по&nbsp;услуге</a>
							</div>

JQuery

if(window.location.hash){ //Проверяем, есть ли в ссылке, по которой перешел пользователь хэштег
		var $hash = window.location.hash, //получаем названием, например #verstka
			$hash_text = $hash.substr(1); // убираем первую строчку, т.е "#"
// далее мой код аккордеона
		$('.service_name_item').next().hide(); 
		$('.service_name_item[data-name="'+ $hash_text +'"]').addClass('active');  //я реализовал нахождение нужного объекта для показа через data-атрибуты(см. HTML)
//ищем есть ли .service_name_item с data-name'ом verstka, и даем ему класс active
		$('.service_name_item.active').next().show(); // открываем следующий блок(показываем содержимое вкладки аккордеона)
		$('.service_name_item').click(function(){
			if($(this).hasClass('active')){
			}else{
				$(this).addClass('active');
				$(this).next().slideToggle();
				$('.service_name_item').not(this).next().stop(true,true).slideUp();
				$('.service_name_item').not(this).removeClass('active');
			}
		});
	}

Comments

[Николай Комиссаров]

Спасибо за код. Очень помогло.
Но не все идеально, ибо при открытии элемента аккордеона с другой страницы - элемент невозможно закрыть.

Так же оставляю код для нуждающихся. :)

if (window.location.hash) {
    var $hash = window.location.hash,
      $hash_text = $hash.substr(1);
    $('элемент аккордеона').next().hide();
    $('элемент аккордеона[data-name="' + $hash_text + '"]').toggleClass('active'); 
    $('элемент аккордеона.active').next().show();
  }

Answer 3

[Антон]

Передайте в ссылку GET параметр или делайте ссылку с хешем, а-ля /uslugi/#verstka