Hiding and Showing content with CSS and Javascript

For those who have lots of information in one page, but you dont want your user to scroll a….ll the way down (yeah it’s quite frustating to find a chunk of information di halaman yang panjang gila). Solusi ini bisa jadi alternatif gampang nan-efektif. Most effectifely on page content such as FAQ dan semacamnya.

Toolnya cuman simple css dan JavaScript ( kelemahan : kalo browsernya mati-in javascript ya udah, usernya bakalan scroll tu halaman panjang gila).

OK! here is the code 😀

first of all, the css :

.hidden { display: none; }
.unhidden { display: block; }

second thing is the Javascript :

<script type="text/javascript">// < !&#91;CDATA&#91;
function unhide(divID) {
  var item = document.getElementById(divID);  
  if (item) {  
   item.className=(item.className=='hidden')?'unhidden':'hidden'; 
      }
  }
// &#93;&#93;></script>

Dua-duanya diletakkan sebelum closing tag

That’s all about it folks 😀 sekarang udah tinggal diapply aja ke contentnya. I’ll use FAQ as the content example.

example:

Q : Mengapa bumi itu bulat?
A : <a href="javascript:unhide('jawaban')">Jawaban</a>
<div id="jawaban" class="hidden">Karena eh karena, berjudi itu dilarang,
merokok itu merusak,
minum bir itu memabukkan</div>

and there you go! you have a nice, clean FAQ page 😀

sumber pencerahan : dari sini thx mate!