Show dan Hide Div

Dalam berkreasi tampilan browser kita ingin mengganti-ganti tampilan di posisi div tertentu. Ini bisa dilakukan dilakukan dengan langkah-langkah sebagai berikut

  1. Tentukan posisi yang akan diubah-ubah. Tentukan posisinya dengan absolut supaya saat dihide posisinya ditimpa oleh div yang lain. Jika posisinya relative, maka akan ada suatu ruangan kosong. Sebagai contoh sebagai berikut:

    #hemat, #exclusive, #lux {
        margin: 0px;
        padding: 0px;
        height: 400px;
        width: 900px;
        position: absolute;
    }
  2. Buat content dari masing-masing div
  3. Untuk hide dan shownya seperti berikut ini:
    document.getElementById("exclusive").style.visibility="hidden";document.getElementById("lux").style.visibility="hidden";document.getElementById("hemat").style.visibility="visible";

Atau kalau ingin melihat secara keseluruhan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show Hide Div</title>
<style type="text/css">
<!--
#hemat, #exclusive, #lux {
    margin: 0px;
    padding: 0px;
    height: 400px;
    width: 900px;
    position: absolute;
}


#hemat {
    border: 2px solid #00CC00;
    visibility: visible;
}

#exclusive{
    border: 2px solid #CCCC00;
    visibility:hidden;
}

#lux {
    border: 2px solid #CC3366;
    visibility:hidden;
}
#content {
    position: absolute;
    top: 410px;
}


-->
</style>
</head>

<body>
          <div id="hemat">
                        <p><strong>Paket Hemat Lengkap: Rp 1,5 juta<br /> </strong></p>
                <ul>
                <li>Untuk website Company Profile, Gallery atau Product Catalog</li>
               
                <li>Disain seperti <a href="http://www.victrans.co.id" target="_blank">www.victrans.co.id</a></li>
                <li>Menu yang tersedia : Home, About Us, Product,Services, Articles,News,Gallery,Clients,Career, Gallery, Contact Us</li>
                <li>Unlimited page </li>
                <li>Unlimited product </li>
                <li>Unlimited gallery</li>
                <li>Contact Form</li>
                <li>Order Form</li>
                <li>CMS Proweb<br /> Teknologi yang memungkinkan pelanggan mengupdate sendiri isi websitenya</li>
               
                <li>Nama domain .com. net, org</li>
                </ul>
                Info lebih lanjut
                <a href="http://www.prowebpro.com/services/paket_website_hemat.php">    http://www.prowebpro.com/services/paket_website_hemat.php</a>
    </div><!--end of #hemat-->
    <div id="exclusive"><p><strong>Paket Exclusive Harga: 5 juta<br /> </strong></p>
                <ul>
                <li>Disain Exclusive</li>
                <li>2 buah layout: Home dan dalam</li>
               
                <li>Cocok untuk website Company Profile, Gallery atau Product Catalog</li>
                <li>Contoh <a href="http://www.alfasolusi.com" target="_blank">www.alfasolusi.com</a></li>
                <li>Menu yang tersedia : Home, About Us, Product,Services, Articles,News,Gallery,Clients,Career, Gallery, Contact Us</li>
                <li>Unlimited page </li>
                <li>Unlimited product </li>
                <li>Unlimited gallery</li>
                <li>Contact Form</li>
                <li>Order Form</li>
                </ul>
                Info lebih lanjut
                <a href="http://www.prowebpro.com/services/paket_website_exclusive.php">http://www.prowebpro.com/services/paket_website_exclusive.php</a>   
</div>
        <div id="lux">
       
        <p><strong>Paket Lux Harga: 12 juta<br /> </strong></p>
<ul>
<li>Disain Exclusive</li>
<li>2 buah layout: Home dan dalam</li>

<li>Header bervariasi setiap menu</li>
<li>1 buah flash di Home</li>
<li>Cocok untuk website Company Profile, Gallery atau Product Catalog</li>
<li>Contoh <a href="http://www.demkasakti.com" target="_blank">www.demkasakti.com</a></li>
<li>Menu yang tersedia : Home, About Us, Product,Services, Articles,News,Gallery,Clients,Career, Gallery, Contact Us</li>
<li>Unlimited page </li>
<li>Unlimited product </li>
<li>Unlimited gallery</li>

<li>Contact Form</li>
<li>Order Form</li>
</ul>
                <a href="http://www.prowebpro.com/services/paket_website_lux.php">http://www.prowebpro.com/services/paket_website_lux.php</a>   

        </div>
       
<div id="content">
<a href="#" onmouseover='document.getElementById("exclusive").style.visibility="hidden";document.getElementById("lux").style.visibility="hidden";document.getElementById("hemat").style.visibility="visible";'>Hemat</a>

<a href="#" onmouseover='document.getElementById("hemat").style.visibility="hidden";document.getElementById("lux").style.visibility="hidden";document.getElementById("exclusive").style.visibility="visible";'>Exclusive</a>


<a href="#" onmouseover='document.getElementById("hemat").style.visibility="hidden";document.getElementById("exclusive").style.visibility="hidden";document.getElementById("lux").style.visibility="visible";'>Lux</a>

</div>

</body>
</html>

 

Atau bisa juga silahkan melihat: pic/330-hide_div.html

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id