JQUERY

jquery [제이쿼리] 토글 (toggle) 버튼 (접기,열기 기능)..

nineDeveloper 2014. 4. 12. 22:22
728x90
반응형

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>toggle button</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function()
 {
  $("#btn1").toggle(
  function()
  {
   $("#content").css("display",'none');
  },
  function()
  {
   $("#content").css("display","block");

  });
 });
</script>
</head>

<body>
  <button id="btn1">toggle button</button>
  <div id="content">
   토글버튼을 만들어 보자.
  </div>
</body>

</html>

 

//  토글버튼을 이용한 접기, 열기 기능.

// css 속성 말고.. $("#content").hide();   show(); 로도가능

 

728x90
반응형