문제

아코디언으로 만든 흔한 문제 풀이 페이지가 있다.흔하네.

보통 이쪽 페이지를 방문할 때는 초기값을 모두 접고 닫는 규격이다.
그러나 어떤 페이지에 접근할 때, 때때로 축소된 상태에서 이동하려고 한다.
예를 들어 어떤 페이지에는 "여기 문의"링크가 있고, 문의 주소가 흔히 볼 수 있는 질문에 기재될 때 등이다.

해결 방법

소스 HREF 값에 특정 문자열 추가하기(앵커 링크)
대상 위치에서 자신의 URI 문자열을 가져옵니다.
특정 문자열(앵커 체인)이 감지되면 열기 축소 처리

소스 코드

소스 페이지 링크

HREF 값에 설명되어 있습니다#acc03.
index.html

<a href="target.html#acc03">リンク先</a>

링크된 페이지(FAQ)

이 글은 아코디언을 열고 닫는 코드를 생략했지만, is-open 클래스를 숨겨진 디스플레이로 전환한다고 가정합니다.
faq.html

<div class="accordion">
  <div id="acc01" class="accordion-item">
    <h2 class="accordion-title">Question 1</h2>
    <div class="accordion-content">
      <p>This is an Answer 1</p>
    </div>
  </div>
  <div id="acc02" class="accordion-item">
    <h2 class="accordion-title">Question 2</h2>
    <div class="accordion-content">
      <p>This is an Answer 2</p>
    </div>
  </div>
  <div id="acc03" class="accordion-item">
    <h2 class="accordion-title">Q. 問い合わせ先はどちらでしょうか。</h2>
    <div class="accordion-content">
      <p>A. 問い合わせ先はこちらです。</p>
    </div>
  </div>
</div>

JS

링크 페이지 주소 표시줄의 문자열을 가져온 다음
문자열이 포함된 경우 #acc03id="acc03" 클래스에 is-open 요소를 부여합니다.
※ 여기 자바스크립트는 FAQ 페이지에서 읽었습니다.

var url = location.href;
if (url.match(/#acc03/)) {
  var acc = document.getElementById('acc03');
  acc.classList.add('is-open');
}