모든 엘리멘터 토글 아코디언 위젯 항목이 항상 열린 상태로 표시되도록 설정하는 방법

엘리멘터에서 토글이나 아코디언 위젯을 사용하여 자주 묻는 질문(FAQ) 등을 표시할 수 있습니다. 토글은 개별 항목이 독립적으로 작동하고 아코디언은 한 번에 하나 항목만 열립니다.

이 글에서는 모든 엘리멘터 토글 위젯 항목들이 열린 상태로 표시되도록 설정하는 방법에 대하여 살펴보겠습니다.

모든 엘리멘터 토글 아코디언 위젯 항목이 항상 열린 상태로 표시되도록 설정하는 방법

엘리멘터 페이지 빌더의 모든 토글 위젯 항목들이 열린 상태로 표시하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

.elementor-toggle .elementor-tab-content {
    display: block !important;
}

위의 코드를 사용하면 토글 항목들은 모두 열린 상태가 됩니다. 반면에 아코디언은 한 번에 하나씩만 열릴 수 있으므로, 모든 항목들이 열리도록 하려면 아코디언(Accordion) 위젯이 아닌 토글(Toggle) 위젯을 사용해야 합니다.

토글이 여러 개인 경우 특정 토글에만 적용하고 싶은 경우에는 원하는 토글에 CSS 클래스를 지정한 다음, 해당 토글에만 CSS 스타일이 적용되도록 하면 됩니다.

엘리멘터 토글 편집 패널에서 Advanced(고급)를 클릭하고  CSS Classes(CSS 클래스) 필드에 커스텀 클래스를 지정하도록 합니다.

엘리멘터 한글 버전:

만약 CSS 클래스 필드에 [**toggle01**]을 입력했다면 다음과 같은 CSS 코드를 사용하여 해당 토글의 항목들만 항상 열린 상태로 표시되도록 할 수 있습니다.

.toggle01 .elementor-toggle .elementor-tab-content {
    display: block !important;
}

특정 토글 위젯 항목만 열리도록 하고 싶은 경우에는 다음과 같은 코드로 시도해 볼 수 있습니다.

.elementor-toggle #elementor-tab-content-2321 {
    display: block !important;
}

탭 ID 부분은 적절히 변경하시기 바랍니다.

CSS 코드는 엘리멘터 프로를 사용하는 경우 Advanced(고급) 탭 » Custom CSS(사용자 정의 CSS)에 직접 추가할 수 있고, 엘리멘터 무료 버전을 사용하는 경우 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS 섹션에 추가할 수 있습니다. 

CSS는 그리 어렵지 않습니다. 기본적인 CSS를 이해하면 위의 코드들을 쉽게 응용할 수 있을 것입니다.

엘리멘터 토글과 아코디언 차이점

엘리멘터 페이지 빌더의 토글과 아코디언 위젯의 차이점은 다음 글을 참고해 보세요.

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2861

워드프레스 Divi 테마용 타투샵 레이아웃 팩(Tattoo Shop Layout Pack) 무료 다운로드

https://avada.tistory.com/554

워드프레스 아바다 테마 라이선스 (테마포레스트 테마)

https://avada.tistory.com/2746

모바일에서 엘리멘터 Tabs 위젯의 탭 레이아웃 유지하기