FAQ 기본폼 만들기

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

간단한 FAQ 폼을 만들어 보는 예제입니다.

FAQ 가 몇가지 방식이 있으나

이 예제는 질문 부분을 누르면 답변이 나오는 아주 간단한 형태입니다.

제이쿼리의 next() , show() 메서드를 사용하여 이름을 참고하지 않고

관계로 접근하도록 만들어 보았습니다.

붙여넣기 하기 편하기 위해서죠 ^^;

예제

질문 : 올챙이는 뜨거운물에 알을 낳을까요? 찬물에 낳을까요?

답변 : 올챙이는 알 못 낳습니다.

질문 : 전기 밥솥에 물과 쌀을 넣고 취사를 누른후, 전기선을 꼈다 꽂았다 반복하면 밥이될까요?

답변 : 됩니다. 왜냐면.. 꼈다 와 꽂았다는 같은말 ㅋㅋ

질문 : 우주에 존재하는 모든 별의 갯수와, 지구의 모든 인간의 머리카락 수를 곱한 것중 뭐가 많을까요?

답변 : 당연히 우주. 지구에는 대머리가 있으므로 곱하면 0 이 된다 ...

질문 : 흙 500g 과 물 500g 중 어느쪽이 더 무거울까?

답변 : 같다. 둘다 500g 임 (찡긋)

소스

	<style type="text/css">

		.faq { width:650px; margin:0 auto; }
		.q { cursor:pointer; margin-top:10px; }
		.a { display:none; margin-top:10px; background:#f6f6f6; padding:5px; }

	</style>

	<div class="faq">
		<div class="q" onclick="$(this).next().show()">질문 : 올챙이는 뜨거운물에 알을 낳을까요? 찬물에 낳을까요?</div>
		<div class="a">답변 : 올챙이는 알 못 낳습니다.</div>

		<div class="q" onclick="$(this).next().show()">질문 : 전기 밥솥에 물과 쌀을 넣고 취사를 누른후, 전기선을 꼈다 꽂았다 반복하면 밥이될까요?</div>
		<div class="a">답변 : 됩니다. 왜냐면.. 꼈다 와 꽂았다는 같은말 ㅋㅋ</div>

		<div class="q" onclick="$(this).next().show()">질문 : 우주에 존재하는 모든 별의 갯수와, 지구의 모든 인간의 머리카락 수를 곱한 것중 뭐가 많을까요?</div>
		<div class="a">답변 : 당연히 우주. 지구에는 대머리가 있으므로 곱하면 0 이 된다 ...</div>

		<div class="q" onclick="$(this).next().show()">질문 : 흙 500g 과 물 500g 중 어느쪽이 더 무거울까?</div>
		<div class="a">답변 : 같다. 둘다 500g 임 (찡긋)</div>
	</div>

	<style type="text/css">

		.faq { width:650px; margin:0 auto; }
		.q { cursor:pointer; margin-top:10px; }
		.a { display:none; margin-top:10px; background:#f6f6f6; padding:5px; }

	</style>

	<div class="faq">
		<div class="q" onclick="$(this).next().show()">질문 : 올챙이는 뜨거운물에 알을 낳을까요? 찬물에 낳을까요?</div>
		<div class="a">답변 : 올챙이는 알 못 낳습니다.</div>

		<div class="q" onclick="$(this).next().show()">질문 : 전기 밥솥에 물과 쌀을 넣고 취사를 누른후, 전기선을 꼈다 꽂았다 반복하면 밥이될까요?</div>
		<div class="a">답변 : 됩니다. 왜냐면.. 꼈다 와 꽂았다는 같은말 ㅋㅋ</div>

		<div class="q" onclick="$(this).next().show()">질문 : 우주에 존재하는 모든 별의 갯수와, 지구의 모든 인간의 머리카락 수를 곱한 것중 뭐가 많을까요?</div>
		<div class="a">답변 : 당연히 우주. 지구에는 대머리가 있으므로 곱하면 0 이 된다 ...</div>

		<div class="q" onclick="$(this).next().show()">질문 : 흙 500g 과 물 500g 중 어느쪽이 더 무거울까?</div>
		<div class="a">답변 : 같다. 둘다 500g 임 (찡긋)</div>
	</div>

☞ 달팽이홈2

등록일 : 2014-12-10