특징
1. 제목만 목록처럼 display
2. 제목을 클릭하면 본문이 토글된다.
3. 다른 제목을 클릭하면 이미 열려 있던 다른 본문이 닫히고, 새로운 본문이 열린다.

jQuery Link
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

JAVASCRIPT Source
//FAQ showhide
$(document).ready(function(){
 $(".faq p").hide();
 $(".faq h3").click(function(){
  $(this).next("p").toggle()
  .siblings("p:visible").toggle();
 });
});

CSS Source
.faq {width:480px; border-bottom:solid 1px #c4c4c4; }
.faq h3 {background:#e9e7e7; margin:0; padding:7px 15px; border:solid 1px #c4c4c4; border-bottom:none; font:bold 120%/100% Arial, Helvetica, sans-serif; cursor:pointer; }
.faq p {background:#f7f7f7; margin:0; padding:10px 15px 20px; border-left:solid 1px #c4c4c4; border-right:solid 1px #c4c4c4; }

HTML Source
<div class="faq">
 <h3>Question One Sample Text</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>This is Question Two</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>Another Questio here</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>Sample heading</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
 <h3>Sample Question Heading</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>


Original Reference Source
http://www.webdesignerwall.com/demo/jquery/accordion1.html

'all' 카테고리의 다른 글

frameset  (0) 2010.03.19
font, generic font families  (0) 2010.03.19
opacity  (0) 2010.03.18
word-break  (0) 2010.03.16
style.css  (0) 2010.03.16

[원본 - http://naradesign.net/wp/2010/02/18/1192/] 수정
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery Link
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

Script
jQuery(function($){
 
 // Common
 var select_root = $('div.select');
 var select_value = $('.myValue');
 var select_a = $('div.select>ul>li>a');
 var select_input = $('div.select>ul>li>input[type=radio]');
 var select_label = $('div.select>ul>li>label');
 
 // Radio Default Value
 $('div.myValue').each(function(){
  var default_value = $(this).next('ul').find('label:first').text();
  $(this).append(default_value);
 });
 
 // Line
 select_value.focusin(function(){$(this).addClass('outLine');});
 select_value.focusout(function(){$(this).removeClass('outLine');});
 select_input.focusin(function(){$(this).parents('div.select').children('div.myValue').addClass('outLine');});
 select_input.focusout(function(){$(this).parents('div.select').children('div.myValue').removeClass('outLine');});
 
 // Show
 function show_option(){
  $(this).parents('div.select:first').toggleClass('open');
 }
 
 // Hover
 function i_hover(){
  $(this).parents('ul:first').children('li').removeClass('hover');
  $(this).parents('li:first').toggleClass('hover');
 }
 
 // Hide
 function hide_option(){
  var t = $(this);
  setTimeout(function(){
   t.parents('div.select:first').removeClass('open');
  }, 1);
 }
 
 // Set Input
 function set_label(){
  var v = $(this).next('label').text();
  $(this).parents('ul:first').prev(select_value).text('').append(v);
  $(this).parents('ul:first').prev(select_value).addClass('selected');
 }
 
 // Set Anchor
 function set_anchor(){
  var v = $(this).text();
  $(this).parents('ul:first').prev(select_value).text('').append(v);
  $(this).parents('ul:first').prev(select_value).addClass('selected');
 }

 // Anchor Focus Out
 $('*:not("div.select a")').focus(function(){
  select_root.removeClass('open');
 });
   
 select_value.click(show_option);
 select_root.removeClass('open');
 select_root.mouseleave(function(){$(this).removeClass('open');});
 select_a.click(set_anchor).click(hide_option).focus(i_hover).hover(i_hover);
 select_input.change(set_label).focus(set_label);
 select_label.hover(i_hover).click(hide_option);
 
});

CSS
/* Select */
.clear { clear:both; }
.select { position:relative; line-height:normal; display:inline-block; *display:inline; vertical-align:middle; *zoom:1; }
.select * { margin:0; padding:0; cursor:pointer; font-size:11px; font-family:Tahoma, Sans-serif; }
.select .myValue { position:relative; z-index:2; left:0; top:0; border:1px solid #DBD7C4; color:#797979; line-height:16px; _line-height:normal; text-align:left; overflow:visible; background:transparent; }
.select button.myValue { height:18px; width:100%; text-indent:5px; *text-indent:0; *padding-left:5px; }
.select ul { position:absolute; top:17px; left:0; width:100%; list-style:none; border:0; border-top:1px solid #DBD7C4; border-bottom:1px solid #DBD7C4; background:#fff; overflow:hidden; }
.select ul.aList { display:none; }
.select.open ul.aList { display:block; }
.select ul.iList { left:-2000%; }
.select.open ul.iList { left:0; }
.select li { position:relative; overflow:hidden; white-space:nowrap; height:16px; border-left:1px solid #DBD7C4; border-right:1px solid #DBD7C4; }
.select li input.option { position:absolute; width:100%; height:20px; line-height:20px; }
.select li label { position:absolute; left:0; top:0; width:100%; text-indent:8px; *text-indent:6px; height:16px; line-height:16px; color:#767676; background:#fff; }
.select li a { display:block; text-indent:8px; *text-indent:6px; height:16px; line-height:16px; color:#767676; background:#fff; text-decoration:none; }
.select li.hover * { background:#999; color:#fff; }
.type1 { width:200px; background:#fff url(../images/select/arrow1.gif) no-repeat right 2px; }
.type2 { width:200px; background:#32302E url(../images/select/arrow2.gif) no-repeat right 4px; }
.type2 .myValue {border-color:#32302E; color:#C1BE94; }
.type2 ul {border-top:1px solid #32302E; border-bottom:1px solid #32302E; }
.type2 li {border-left:1px solid #32302E; border-right:1px solid #32302E; }

HTML
<div class="type1 select open">
 <button type="button" class="myValue">Select Link</button>
 <ul class="aList">
  <li><a href="#1">Link_1</a></li>
  <li><a href="#2">Link_2</a></li>
  <li><a href="#3">Link_3</a></li>
 </ul>
</div>
<br class="clear" />
<br /><br /><br />
<div class="type2 select open">
 <button type="button" class="myValue">Select Link</button>
 <ul class="aList">
  <li><a href="#1">Link_1</a></li>
  <li><a href="#2">Link_2</a></li>
  <li><a href="#3">Link_3</a></li>
 </ul>
</div>

Image Sources



Snapshots


[원본 - http://naradesign.net/wp/2010/02/18/1192/] 수정

'all' 카테고리의 다른 글

word-break  (0) 2010.03.16
style.css  (0) 2010.03.16
scrollbar  (0) 2010.03.14
showHideLayers  (0) 2010.03.14
default.css  (0) 2010.03.14


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


$(document).ready(function () {

});

*jQuery는 Quicks mode에서 구현이 안될 수도 있습니다.

'all' 카테고리의 다른 글

스크롤 따라 움직이는 퀵메뉴 (SK그룹)  (0) 2010.03.03
CDATA [XML]  (0) 2010.03.03
PNG24 백그라운드 이미지로 사용할 경우 css  (0) 2010.03.03
HTML과 다른 XHTML의 특징  (0) 2010.03.03
DTD <!DOCTYPE> 설명  (0) 2010.03.03

+ Recent posts

티스토리툴바