css accordion

오로지 css 만으로 accordion 효과 만들기 그냥  jquery를 써도 되지만 심심해서가 아니라 퍼블을 하다보니 매번 jquery를 가져와서 css 수정하는게 귀찮기도 해서 간단히 css만으로 만들수 있지않을까 해서 만들어봄 

 

실제 거래처 질답(Q&A)부분에 적용시켜 사용중인 부분이다.

 

우선은 html 구조

 

<div>

    <ul class="qna_tabs">

        <li class="qna">

            <input type="radio" name="tabs1"  id="tabs_id1" />

            <label for="tabs_id1">질문1</label>

            <div class="qna_a">답1</div>

        </li>

        <li class="qna">

            <input type="radio" name="tabs2"  id="tabs_id2" />

            <label for="tabs_id2">질문2</label>

            <div class="qna_a">답2</div>

        </li>

        <li class="qna">

            <input type="radio" name="tabs3"  id="tabs_id3" />

            <label for="tabs_id3">질문3</label>

            <div class="qna_a">답3</div>

        </li>

    </ul>

</div>

 

위와 같이 radio 버튼을 이용한  아코디언 효과를 만들 예정 이다.

 

다음은 css 구조

 

.qna_tabs {margin:0; padding:0; list-style:none}

.qna_tabs input[type=radio] {display:none}

.qna_tabs label {display:block; cursor:pointer; background:#f00}

.qna_a {display:none; background:#00f}

.qna_tabs input:checked ~ .qna_a {display:block}

 

보면 알겠지만 라디오 버튼을 가리고 라벨을 클릭 할 수 있도록 유도하여 라디오 버튼에 체크가 될시 가려놓은 오브젝트를 보여주는 방식이다.

 

아래는 실제 예시 티스토리에서 스타일을 주는데 제한이 있어서 저렇게 간단하게만 예시를 만들었다.

 

예시)

 

• 질문1
  답1
• 질문2
  답2
• 질문3
  답3