Skip to main content

Show And Hide Instantaneously Dengan Jquery


<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hide And Show Jquery</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">
</head>

<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        SHOW HIDE Jquery
                    </a>
                </li>
                <li>
                    <a href="#">Beranda</a>
                </li>
                <li>
                    <a href="#">Option1</a>
                </li>
                <li>
                    <a href="#">Option2</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper" align="center">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Demo Hide And Show Di Jquery</h1>
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Show Hide Menu</a>
                        <hr>
                        <button id="hide" class="btn btn-default">Hide</button>
                        <button id="show" class="btn btn-default">Show</button><hr>
                        <p>
                        <img src="https://lh3.googleusercontent.com/-G3frn6YG2FU/VcGEb9agcII/AAAAAAAAHAA/wbyfPhjO1j4FYnFSWvdIqvMxH-wp7kwsgCCo/s800-Ic42/IMG_20150804_210451.jpg" class="img-responsive">
                        </p>
                        <hr>
                     
                     
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Menu Toggle Script -->
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide(1000);
    });
    $("#show").click(function(){
        $("p").show(1000);
    });
});
</script>

</body>

</html>

Demo Hide And Show Di Jquery





Comments

Popular posts from this blog

Memanggil file CSS ke Halaman HTML

Postingan sebelumnya saya menjelaskan tentang halaman html sederhana dengan layout CSS, yang mana Script CSS di gabungkan ke halaman HTML, kali ini saya akan menjelaskan bagaimana memisahkan file CSS dan cara memanggil file tersebut di halaman HTML.
Pertama lihat kembali ke halaman html, buka dengan editor kamu.
<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
________________________________________
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<…

Perancangan Ruang Server

Perlunya Memiliki Server dan Ruang Server Sendiri
A. Alasan Memiliki Server & Ruang Server Sendiri
Pembangunan Gedung D pada STT Ibnu Sina akan menambah jumlah user pada fasilitas E-learning dan akses website STT Ibnu Sina lainnya. Hal tersebut tentu akan menambah beban jaringan atau Bandwidth yang dibutuhkan untuk menyimpan content pada E-learning dan Website STT Ibnu Sina, seperti modul tugas dan Data Kemahasiswaan.
Berikut beberapa keuntungan jika STT Ibnu Sina memuliki Server dan ruang Server sendiri :

Mempermudah baik pihak pengurus STT Ibnu Sina Batam maupun mahasiswa dalam mengatur dan mengakses data dan informasiKerahasiaan data dan informasi terjaga dalam server.Mengurangi biaya internet karena situs STT Ibnu Sina yang di akses melalui jaringan yang ada di STT Ibnu Sina akan menggunakan jaringan local, sehingga tidak membutuhkan akses internetMempermudah mahasiswa khususnya teknik informatika untuk belajar langsung tentang server, data center dan kegunaannyaMenjadi salah sa…

Pengaturan Account Email POP3 dan IMAP Pada Aplikasi Gmail di Android

Sebelum konfigurasi POP3, IMAP dan SMTP berikut hal-hal yang perlu kamu ketahui:

Apa yang dimaksud dengan POP3? 

Post Office Protocol version 3 (POP3) adalah protokol email standar yang digunakan untuk menerima email dari server ke local email client. POP3 memungkinkan anda untuk men-download pesan email pada komputer local anda dan membacanya bahkan ketika anda sedang offline.

Apa yang dimaksud dengan IMAP? 

The Internet Message Access Protocol (IMAP) adalah protokol email yang digunakan untuk mengakses email pada web server dari klien lokal. IMAP dan POP3 adalah dua protokol email yang paling umum digunakan untuk mengambil email. kedua protokol tersebut didukung oleh semua klien email dan web server.

Perbedaan utama antara IMAP dan POP3:

Protokol POP3 mengasumsikan bahwa hanya ada satu klien yang terhubung ke kotak surat. Sebaliknya, protokol IMAP memungkinkan akses simultan oleh beberapa klien. IMAP cocok untuk anda jika kotak surat anda dikelola oleh beberapa pengguna. 

Apa yang dim…