1. <div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1</div>
  2. <div id="hide1" class="hide">Hide 1</div>
  3. <div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2</div>
  4. <div id="hide2" class="hide">Hide 2</div>
  5. <div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3</div>
  6. <div id="hide3" class="hide">Hide 3</div>
  7. <div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4</div>
  8. <div id="hide4" class="hide">Hide 4</div>
  9.  
  10.  
  11. css
  12.  
  13.  
  14. .spoiler1{
  15. font-size: 16px;
  16. background-color: #c0e6d2;
  17. border: 1px solid #a7c8b7;
  18. width: 530px;
  19. height: 45px;
  20. text-shadow: 0px 1px 0px #f4f4f4;
  21. filter: dropshadow(color=#fff, offx=0, offy=1);
  22.  
  23. }
  24. .hide{
  25. display:none;
  26. }
  27. #spoiler1{
  28. font-size: 16px;
  29. background-color: #c0e6d2;
  30. border: 1px solid #a7c8b7;
  31. width: 530px;
  32. height: 45px;
  33. text-shadow: 0px 1px 0px #f4f4f4;
  34. filter: dropshadow(color=#fff, offx=0, offy=1);
  35.  
  36. }
  37. #spoiler2{
  38. font-size: 16px;
  39. background-color: #c0e6d2;
  40. border: 1px solid #a7c8b7;
  41. height: 45px;
  42. width: 530px;
  43. text-shadow: 0px 1px 0px #f4f4f4;
  44. filter: dropshadow(color=#fff, offx=0, offy=1);
  45. margin-top: 3px;
  46.  
  47. }
  48. #spoiler3{
  49. font-size: 16px;
  50. background-color: #c0e6d2;
  51. border: 1px solid #a7c8b7;
  52. height: 45px;
  53. width: 530px;
  54. text-shadow: 0px 1px 0px #f4f4f4;
  55. filter: dropshadow(color=#fff, offx=0, offy=1);
  56. margin-top: 3px;
  57. }
  58. #spoiler4{
  59. font-size: 16px;
  60. background-color: #c0e6d2;
  61. border: 1px solid #a7c8b7;
  62. height: 45px;
  63. width: 530px;
  64. text-shadow: 0px 1px 0px #f4f4f4;
  65. filter: dropshadow(color=#fff, offx=0, offy=1);
  66. margin-top: 3px;
  67. }
  68.  
  69. #hide1{
  70. font-size: 16px;
  71. background-color: #dedede;
  72. border: 1px solid #c1c1c1;
  73. width: 530px;
  74. height: 120px;
  75. color: #fff;
  76. text-shadow: 0px 1px 0px #f4f4f4;
  77. filter: dropshadow(color=#fff, offx=0, offy=1);
  78. margin-top: 3px;
  79.  
  80.  
  81. }
  82. #hide2{
  83. font-size: 16px;
  84. background-color: #dedede;
  85. border: 1px solid #c1c1c1;
  86. width: 530px;
  87. height: 120px;
  88. color: #fff;
  89. text-shadow: 0px 1px 0px #f4f4f4;
  90. filter: dropshadow(color=#fff, offx=0, offy=1);
  91. margin-top: 3px;
  92.  
  93.  
  94. }
  95. #hide3{
  96. font-size: 16px;
  97. background-color: #dedede;
  98. border: 1px solid #c1c1c1;
  99. width: 530px;
  100. height: 120px;
  101. color: #fff;
  102. text-shadow: 0px 1px 0px #f4f4f4;
  103. filter: dropshadow(color=#fff, offx=0, offy=1);
  104. margin-top: 3px;
  105.  
  106.  
  107. }
  108. #hide4{
  109. font-size: 16px;
  110. background-color: #dedede;
  111. border: 1px solid #c1c1c1;
  112. width: 530px;
  113. height: 120px;
  114. color: #fff;
  115. text-shadow: 0px 1px 0px #f4f4f4;
  116. filter: dropshadow(color=#fff, offx=0, offy=1);
  117. margin-top: 3px;
  118.  
  119.  
  120. }