Mam taki kodzik:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>With Cookies</title>
  6. <script type="text/javascript" language="javascript" src="/js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript" language="javascript" src="/js/jquery.cookie.js"></script>
  8. <script type="text/javascript" language="javascript"> 
  9. $(document).ready(function() {
  10. // LEFT COLUMN:
  11. 	// When the collapse button is clicked:
  12. 	$('.collapseLeft').click(function() {
  13. 		$('.collapseLeft').css("display","none");
  14. 		$('.expandLeft').css("display","block");
  15. 		$('#leftCol').animate( {height:"20px"},  {duration:400} );
  16. 		$.cookie('leftCol', 'collapsed');
  17. 	});
  18. 	// When the expand button is clicked:
  19. 	$('.expandLeft').click(function() {
  20. 		$('.expandLeft').css("display","none");
  21. 		$('.collapseLeft').css("display","block");
  22. 		$('#leftCol').animate( {height:"500px"},  {duration:400} );
  23. 		$.cookie('leftCol', 'expanded');
  24. 	});
  25. // RIGHT COLUMN:
  26. 	// When the collapse button is clicked:
  27. 	$('.collapseRight').click(function() {
  28. 		$('.collapseRight').css("display","none");
  29. 		$('.expandRight').css("display","block");
  30. 		$('#rightCol').animate( {height:"20px"},  {duration:400} );
  31. 		$.cookie('rightCol', 'collapsed');
  32. 	});
  33. 	// When the expand button is clicked:
  34. 	$('.expandRight').click(function() {
  35. 		$('.expandRight').css("display","none");
  36. 		$('.collapseRight').css("display","block");
  37. 		$('#rightCol').animate( {height:"500px"},  {duration:400} );
  38. 		$.cookie('rightCol', 'expanded');
  39. 	});
  40. // COOKIES
  41. 	// Left column state
  42. 	var leftCol = $.cookie('leftCol');
  43. 	// Right column state
  44. 	var rightCol = $.cookie('rightCol');
  45. 	// Set the user's selection for the left column
  46. 	if (leftCol == 'collapsed') {
  47. 		$('.collapseLeft').css("display","none");
  48. 		$('.expandLeft').css("display","block");
  49. 		$('#leftCol').css("height","20px");
  50. 	};
  51. 	// Set the user's selection for the right column
  52. 	if (rightCol == 'collapsed') {
  53. 		$('.collapseRight').css("display","none");
  54. 		$('.expandRight').css("display","block");
  55. 		$('#rightCol').css("height","20px");
  56. 	};
  57. });
  58. </script>
  59. <style> 
  60. body {
  61. 	background-color:#444444;
  62. 	position:relative;
  63. }
  64. #page {
  65. 	width:500px;
  66. 	margin:0 auto;
  67. 	text-align:center;
  68. 	background-color:#222222;
  69. 	padding:1px;
  70. }
  71. #leftCol {
  72. 	width:149px;
  73. 	margin-right:1px;
  74. 	height:500px;
  75. 	float:left;
  76. 	background-color:#666666;
  77. 	position:relative;
  78. }
  79. #rightCol {
  80. 	width:350px;
  81. 	height:500px;
  82. 	float:left;
  83. 	background-color:#333333;
  84. 	position:relative;
  85. }
  86. .expandLeft, .expandRight {
  87. 	width:11px; 
  88. 	height:11px;
  89. 	background:url(http://www.shopdev.co.uk/blog/expand.gif) no-repeat;
  90. 	position:absolute;
  91. 	right:5px;
  92. 	top:4px;
  93. 	display:none;
  94. }
  95. .collapseLeft, .collapseRight {
  96. 	width:11px; 
  97. 	height:11px;
  98. 	background:url(http://www.shopdev.co.uk/blog/collapse.gif) no-repeat;
  99. 	position:absolute;
  100. 	right:5px;
  101. 	top:4px;
  102. }
  103. </style>
  104. </head>
  105.  
  106. <body>
  107.     <div id="page">
  108.         <div id="leftCol">
  109.         <div class="collapseLeft"></div>
  110.         <div class="expandLeft"></div>
  111.         </div>
  112.         <div id="rightCol">
  113.         <div class="collapseRight"></div>
  114.         <div class="expandRight"></div>
  115.         </div>
  116.         <br clear="all" />
  117.     </div>
  118. </body>
  119. </html>
[HTML] pobierz, plaintext


i chcę, aby domyślnie było rowinięte i w tym: <div class="informacja">tekst</div> i nie wiem gdzie to wkleić. Bardzo proszę o pomoc.

Jak ustwić domyślnie expand i gdzie wkleić div?

EDIT:
Postanowiłem zmienić kod, lecz nie działają mi w nim ciasteczka.
Co jest nie tak w poniższym kodzie?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>two state cookie</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. <!--
  8. #setup {
  9. color:#000;
  10. background-color:#fff;
  11. }
  12. #info {
  13. width:400px;
  14. padding:30px 20px;
  15. border:3px double #000;
  16. margin:20px auto;
  17. }
  18. #info p {
  19. margin:0;
  20. text-align:justify;
  21. }
  22. .hide {
  23. display:none;
  24. }
  25. .show {
  26. display:block;
  27. }
  28. -->
  29. </style>
  30.  
  31. <script type="text/javascript">
  32. <!--
  33. var state;
  34. window.onload=function() {
  35. obj=document.getElementById('info');
  36. state=(state==null)?'hide':state; 
  37. obj.className=state;
  38.  
  39. document.getElementById('setup').onclick=function() {
  40. obj.className=(obj.className=='show')?'hide':'show';
  41. state=obj.className;
  42. setCookie();
  43. return false;
  44. }
  45. }
  46.  
  47. function setCookie() {
  48. exp=new Date();
  49. plusMonth=exp.getTime()+(31*24*60*60*1000);
  50. exp.setTime(plusMonth);
  51. document.cookie='State='+state+';expires='+exp.toGMTString();
  52. }
  53.  
  54. function readCookie() {
  55. if(document.cookie) {
  56. state=document.cookie.split('State=')[1];
  57. }
  58. }
  59. readCookie();
  60. //-->
  61. </script>
  62.  
  63. </head>
  64. <body>
  65.  
  66. <div>
  67. <a id="setup" href="#">show/hide information</a>
  68. </div>
  69.  
  70. <div id="info">
  71. <p>
  72. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
  73. Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
  74. nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
  75. Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
  76. nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
  77. ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
  78. ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
  79. bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
  80. </p>
  81. </div>
  82.  
  83. </body>
  84. </html>
[HTML] pobierz, plaintext