Elementor에서 클릭 시 섹션을 표시하거나 숨기는 방법

주요 시사점

• Elementor에는 클릭 시 섹션을 표시하거나 숨기는 전용 컨트롤이 없으므로 세 가지 작업 방법은 Accordion 위젯, 콘텐츠 토글 위젯 및 짧은 스크립트가 있는 버튼입니다.
• Elementor Accordion 위젯은 제목이 클릭될 때까지 항목 내부의 모든 위젯을 숨기고 기본 상태를 모두 축소된 상태로 설정하면 페이지 로드 시 항목이 닫힌 상태로 유지됩니다.
• 마스터 애드온 콘텐츠 토글 위젯은 두 옵션 중 하나가 비어 있고 다른 옵션이 섹션을 보유하고 있을 때 표시 및 숨기기 스위치로 작동합니다.
• 버튼은 버튼에 하나의 CSS 클래스를 사용하고 컨테이너에 하나를 사용하여 HTML 위젯에 약 10줄의 JavaScript가 포함된 Elementor 컨테이너를 표시하거나 숨길 수 있습니다.
• Elementor 표시 조건과 반응형 숨기기 설정은 방문자가 작업을 수행하기 전에 규칙이나 장치별로 표시되는 내용을 결정하기 때문에 클릭에 반응하지 않습니다.

Elementor 에서 클릭 시 섹션을 표시하거나 숨기려면 클릭 시 열리는 항목 안에 섹션을 넣으십시오. Accordion 위젯은 추가 플러그인 없이 이 작업을 수행합니다. 콘텐츠 토글을 사용하면 표시 및 숨기기 스위치가 제공됩니다. 스크립트 몇 줄이 있는 버튼은 페이지의 모든 컨테이너를 표시할 수 있습니다. Elementor 에는 단일 “클릭 시 표시” 설정이 없으므로 이 세 가지 중 하나가 경로입니다.

아래의 각 메서드는 Elementor 4.3에서 빌드되고 테스트되었습니다. 트리거가 어떻게 보여야 하는지 선택하세요: 제목 표시줄, 스위치 또는 버튼.

어떤 방법이 페이지에 맞는지

세 가지 방법 모두 클릭할 때까지 섹션을 숨깁니다. 방문자가 클릭하는 내용과 필요한 설정량이 다릅니다.

방법 1: 아코디언 위젯

아코디언 위젯은 클릭 시 섹션을 표시하는 가장 빠른 방법입니다. 각 항목은 모든 위젯을 허용하는 컨테이너이기 때문입니다. 안에 넣은 것은 제목이 클릭될 때까지 숨겨져 있습니다.

1. Elementor로 페이지를 편집하고 드래그하세요 아코디언 숨겨진 섹션이 있어야 하는 위치의 위젯입니다.
2. 필요하지 않은 항목은 삭제합니다. 숨겨진 섹션 하나에 대해 항목 하나를 유지합니다.
3. 배송 세부 정보 표시와 같이 방문자가 클릭할 제목을 입력합니다.
4. 항목 내부를 클릭하고 콘텐츠를 추가하세요: 텍스트, 이미지, 양식 또는 전체 컨테이너 레이아웃.
5. 오픈 상호작용 및 설정 기본 상태 에 모두 무너졌습니다.

이 메서드의 한계는 모양입니다. 트리거는 항상 콘텐츠 바로 위에 있는 제목 표시줄입니다. 스타일이 지정된 버튼이 필요하거나 페이지의 다른 곳에 트리거가 필요한 경우 방법 3 을 사용하십시오. 더 많은 제목 스타일을 보려면,the 고급 아코디언 위젯 는 옵션이다.

방법 2: 빈 옵션이 있는 콘텐츠 토글

콘텐츠 토글은 일반적으로 두 블록 사이를 전환합니다. 하나의 블록을 비워 두면 쇼가 되고 스위치 숨기기: 하나의 레이블은 아무것도 표시하지 않고 다른 레이블은 섹션을 표시합니다.

이 단계는 사용합니다 콘텐츠 전환 master Addons Pro 에서. Elementor 4,3 에서 빈 옵션을 테스트했으며 간격이나 자리 표시자를 남기지 않습니다.

1. 드래그 콘텐츠 전환 페이지로.
2. 에서 요소 첫 번째 항목에 목록을 작성하고 레이블을 지정합니다. 세부 정보를 숨기고 샘플 텍스트를 삭제하여 내용이 비어 있도록 합니다.
3. 두 번째 항목에 레이블 지정 세부 정보 표시 편집기 또는 세트에 내용을 작성합니다 유형 템플릿으로 이동하여 전체 레이아웃에 대해 저장된 템플릿을 선택합니다.
4. 오픈 설정 토글 그리고 떠나세요 활성 인덱스 1에서는 페이지가 숨겨진 섹션으로 로드됩니다.
5. 세트 위치 스위치가 섹션 위에 있어야 하는 경우 이전으로, 아래에 놓아야 하는 경우 이후로.

스위치는 영양 사실,기술 사양 또는 용어와 같은 선택적 세부 사항에 적합한 상태를 명백하게 만듭니다. 다른 방법으로 뒤집으려면 먼저 섹션이 표시되고 Active Index 를 2 로 설정합니다.

두 섹션 사이를 전환하시겠습니까? X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 콘텐츠 위젯 페이지 전환 청구 스위치, 사양 테이블 및 8개의 추가 라이브 데모가 있습니다.

방법 3: 버튼과 짧은 스크립트

트리거가 일반 버튼이어야 할 때 또는 버튼과 섹션이 다른 위치에 있을 때 스크립트를 사용합니다. 버튼에 CSS 클래스 하나를 추가하고 섹션에 하나를 추가하고 HTML 위젯에 작은 조각을 붙여 넣습니다.

1. 추가 a 버튼 위젯. 안에 고급 > CSS 클래스, 유형 show-hide-button. 버튼의 링크 필드를 비워 둡니다.
2. 숨길 컨테이너를 선택합니다. In 고급 > CSS 클래스, 유형 show-hide-target.
3. 드래그 앤 에리키 페이지의 아무 곳이나 위젯을 사용하고 아래 코드를 붙여넣으세요.
4. 페이지를 업데이트하고 프런트 엔드에서 테스트합니다.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

첫 번째 스타일 규칙은 컨테이너를 숨깁니다. 두 번째는 스크립트가 다음을 추가하면 보여줍니다 is-open class. 세 번째는 Elementor 편집기 내부에 컨테이너를 계속 볼 수 있도록 유지하므로 여전히 편집할 수 있습니다. 버튼을 클릭할 때마다 클래스가 추가되거나 제거됩니다.

이 방법에 대한 세 가지 참고 사항. 클래스가 있는 모든 컨테이너는 함께 열리므로 한 페이지에 별도의 쌍이 필요한 경우 다른 클래스 이름을 사용하십시오. 버튼 텍스트는 저절로 변경되지 않습니다. 캐싱 또는 스크립트 최적화 플러그인이 JavaScript를 지연시키는 경우 스크립트가 로드될 때까지 첫 번째 클릭을 무시할 수 있습니다.

섹션이 페이지 위로 열려야 하는 경우 팝업을 사용합니다. 참조 elementor 에서 팝업을 추가하는 방법.

작동하지 않는 것: 조건 및 응답 설정을 표시합니다

두 Elementor 기능은 이렇게 해야 하는 것처럼 들리고 하지 않습니다. 둘 다 콘텐츠를 숨기지만 클릭에 반응하지 않습니다.

• 반응형 설정. 고급 > 반응형에는 데스크톱에서 숨기기,태블릿에서 숨기기 및 모바일에서 숨기기가 있습니다. 항상 화면 크기로 요소를 숨깁니다.
• 표시 조건. Elementor 의 표시 조건 로그인 상태,사용자 역할,날짜 또는 브라우저와 같은 규칙으로 요소를 표시하거나 숨깁니다. 페이지가 로드될 때 결정이 내려집니다.

그들은 사이트가 방문자가 보는 것을 결정해야 할 때 올바른 도구입니다. 우리는 그들을 덮습니다 엘리멘터 표시 조건, 그리고 표시 조건 확장 페이지에는 지원하는 모든 규칙이 나열되어 있습니다. 방문자가 결정해야 할 때 위의 세 가지 클릭 방법 중 하나를 사용하십시오.

자주 묻는 질문

최종 생각

Elementor 에서 클릭 시 섹션을 표시하거나 숨기는 세 가지 신뢰할 수 있는 방법이 있습니다. 제목 표시줄이 괜찮을 때는 아코디언 위젯을 사용하고,보이는 스위치를 원할 때는 빈 옵션이 하나 있는 콘텐츠 토글을 사용하고,트리거가 다른 곳에 있어야 할 때는 짧은 스크립트가 있는 버튼을 사용합니다.

하나를 숨기는 것보다 두 섹션 사이를 더 자주 전환하게 되면 콘텐츠 위젯 토글 을 위해 만들어졌다.

관련 읽기

• Elementor 표시 조건: 규칙에 따라 콘텐츠를 표시하고 숨깁니다
• Elementor 에서 팝업을 추가하는 방법
• 요소 스크롤 효과
• Elementor 에서 토글 버튼을 만드는 방법 (3 가지 방법)
• 요소 토글 vs 아코디언 vs 탭 vs 콘텐츠 전환기