비주얼 컴포저 Accordion

Accordion 기능

Accordion의 기능은 여러 가지 항목에 대한 부연 설명이 많은 경우, 특정 주제 항목을 클릭 시 해당 주제에 대한 설명만을 볼 수 있게 한다.

Accordion minimal (Style 1 – with no background)

Accordion 은 무슨 엘리먼트(Element) 인가요 ?

accordion

우리가 어렸을 때 또는 영화에서 한번 정도 보았을 것이다. 악기의 양쪽의 손을 넣고 한쪽은 건반을 다른 한쪽은 공기의 압력을 조절하여 소리는 내는 악기. Accordion에서 이름을 가져온 것이며, 주제에 해당 하는 내용만 열어서 보여 줄 수 있도록 펼쳤다, 닫았다 할 수 있는 것을 말한다.

아래 악기 이미지를 보면 어떤 악기 인지 금방 눈치를 채게 될 것 이다.

Accordion 의 스타일 종류

VC Accordion의 스타일은 아래와 같이 세가지 종류가 있다.

  • Style 1 (With no Background) – 배경에 아무런 효과를 주지 않는 스타일
  • Style 2 (With Background) – 배경을 색상 또는 이미지로 효과를 주는 스타일
  • Style 3 (With dividers) – 항목별 사이트 가로선을 배치 하는 스타일

Accodion에서 첫 번째 주제만 우선 오픈시키는 방법은 ?

Accordion 설정

위의 그림에서와 같이 Accordion 설정(Setting)에 가면, Active Section 이란 항목이 있다. 해당 항목의 값을 1로 설정 하면 Accordion 첫번째 주제에 대한 설명은 항상 오픈(Open) 되어 있다.

Praesent placerat dui metus

Vivamus ac massa sem. Praesent placerat dui metus, vitae mattis mi lobortis aliquam. Proin risus eros, dapibus a porttitor id, eleifend a est. Sed metus leo, blandit sit amet odio id, hendrerit sollicitudin lacus. Pellentesque vitae lectus molestie, ornare sem eget, sagittis metus. Maecenas id eros urna. Duis et accumsan nunc, eget faucibus leo. Cras ornare massa in neque venenatis, a posuere dui ornare. Maecenas id volutpat mi, eu pellentesque eros. Morbi nibh libero, feugiat eget rutrum sit amet, interdum nec magna.

Duis ullamcorper id augue

Cras est ante, porttitor non aliquam eget, ornare venenatis urna. Sed ac quam et arcu lacinia mattis rutrum vel massa. Phasellus blandit, risus at porttitor pharetra, tellus dolor euismod nunc, eget venenatis tortor neque ac erat.

Accordion with background (Style 2)

주제 글자 사이즈 변경이 가능한가요 ?

네, 위와 같이 폰트 사이즈를 조절이 가능합니다. Accordion 의 Title 사이즈를 Medium 으로 설정한 것입니다.

Suspendisse malesuada libero odio

Phasellus in libero eleifend magna hendrerit aliquam. Suspendisse malesuada libero odio, in egestas magna mattis a. Maecenas mauris diam, cursus et eros a, faucibus pretium dolor. Proin ac ultrices tellus. Nunc felis orci, aliquam interdum risus sit amet, venenatis sollicitudin diam. Cras bibendum dui nec leo tempus tempus.

Maecenas id eros urna

Praesent placerat dui metus, vitae mattis mi lobortis aliquam. Proin risus eros, dapibus a porttitor id, eleifend a est. Cras ornare massa in neque venenatis, a posuere dui ornare. Maecenas id volutpat mi, eu pellentesque eros. Morbi nibh libero, feugiat eget rutrum sit amet, interdum nec magna.

Praesent placerat dui metus

Vivamus ac massa sem. Praesent placerat dui metus, vitae mattis mi lobortis aliquam. Proin risus eros, dapibus a porttitor id, eleifend a est. Sed metus leo, blandit sit amet odio id, hendrerit sollicitudin lacus. Pellentesque vitae lectus molestie, ornare sem eget, sagittis metus. Maecenas id eros urna. Duis et accumsan nunc, eget faucibus leo. Cras ornare massa in neque venenatis, a posuere dui ornare. Maecenas id volutpat mi, eu pellentesque eros. Morbi nibh libero, feugiat eget rutrum sit amet, interdum nec magna.

Duis ullamcorper id augue

Cras est ante, porttitor non aliquam eget, ornare venenatis urna. Sed ac quam et arcu lacinia mattis rutrum vel massa. Phasellus blandit, risus at porttitor pharetra, tellus dolor euismod nunc, eget venenatis tortor neque ac erat.

Accordion with dividers (Style 3)

주제간 줄(Dividers)은 어떻게 생성되는가 ?

Accordion 설정(Setting)을 오픈 하면, Style 이라는 항목이 있다. Style 항목에서 Style 3(With Divider)를 선택하면 주제간 라인이 생성된다.

Suspendisse malesuada libero odio

Phasellus in libero eleifend magna hendrerit aliquam. Suspendisse malesuada libero odio, in egestas magna mattis a. Maecenas mauris diam, cursus et eros a, faucibus pretium dolor. Proin ac ultrices tellus. Nunc felis orci, aliquam interdum risus sit amet, venenatis sollicitudin diam. Cras bibendum dui nec leo tempus tempus.

Maecenas id eros urna

Praesent placerat dui metus, vitae mattis mi lobortis aliquam. Proin risus eros, dapibus a porttitor id, eleifend a est. Cras ornare massa in neque venenatis, a posuere dui ornare. Maecenas id volutpat mi, eu pellentesque eros. Morbi nibh libero, feugiat eget rutrum sit amet, interdum nec magna.

Praesent placerat dui metus

Vivamus ac massa sem. Praesent placerat dui metus, vitae mattis mi lobortis aliquam. Proin risus eros, dapibus a porttitor id, eleifend a est. Sed metus leo, blandit sit amet odio id, hendrerit sollicitudin lacus. Pellentesque vitae lectus molestie, ornare sem eget, sagittis metus. Maecenas id eros urna. Duis et accumsan nunc, eget faucibus leo. Cras ornare massa in neque venenatis, a posuere dui ornare. Maecenas id volutpat mi, eu pellentesque eros. Morbi nibh libero, feugiat eget rutrum sit amet, interdum nec magna.

Duis ullamcorper id augue

Cras est ante, porttitor non aliquam eget, ornare venenatis urna. Sed ac quam et arcu lacinia mattis rutrum vel massa. Phasellus blandit, risus at porttitor pharetra, tellus dolor euismod nunc, eget venenatis tortor neque ac erat.

Toggle (FAQ)

Toggle 의 기능은 무엇인지요 ?

Toggle의 기능 Accordion 과 유사한 기능이며, 다른 점은 반드시 클릭된 주제만 설명을 볼 수 있다는 것이다.

Toggle은 주로 어떤 경우에 주로 사용하는지요 ?

Toggle 은 주로 질의 응답(FAQ) 구성시 주로 사용한다.

Toggle title magna aliquam

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

Toggle title dolor amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat