Show/Hide an Element using jQuery (with Example/Demo)

jQuery merupakan salah satu skrip terpenting saya rasa pada pengembangan web, jQuery sendiri merupakan kumpulan dari fungsi javascript yang bisa memudahkan kita dalam membangun web.

Nah ini karena barusan ada yang tanya di chat (fadli):

saya lagi belajar buat formulir, tapi ada satu fitur yg belum saya temukan solusinya. yaitu ada satu kolom textarea yang secara default mau saya hidden. tapi ketika orang selesai mengisi formulir itu & klik tombol submit kolom textarea itu baru muncul. saya pernah lihat beberapa website pakai cara semacam <div id=”hide”> dan semacamnya, tapi saya blm nemu itu namanya apa jadi saya kesulitan waktu searching untuk pakai keyword yang dimaksud. mungkin mas ahlul tahu apa namanya ya/

He2 jadi saya postingkan saja di sini biar semua kebagian tipsnya.

Menggunakan jQuery untuk Show/Hide element

Yang perlu dilakukan pada dibagian awal adalah mendeklarasikan jQuery pada bagian header, ini bisa dilakukan dengan.

[sourcecode lang="html"][/sourcecode]

Kemudian tambahkan juga dibagian header seperti ini:

[sourcecode lang="html"][/sourcecode]

Dan pada bagian body anda bisa menambahkan seperti berikut ini:

[sourcecode lang="html"]

ShowHide

[/sourcecode]

Penjelasan

Contoh di atas menggunakan API jquery, yaitu .show dan .hide().

Pada body saya tambahkan link yang ketika di klik maka menjalankan fungsi yang dikehendaki terhadap salah satu element.

He2 begitu singkat cuma karena kodenya juga dikit :)

Semoga bermanfaat.

Demo bisa di lihat di:

http://ahlul.web.id/demo/show-hide-element-with-jquery/

6 thoughts on “Show/Hide an Element using jQuery (with Example/Demo)

  1. wah, terima kasih banyak mas ahlul!

    tapi kalau saya disini untuk mengeksekusi/menampilkan textareanya melalui tombol submit mas. sedangkan tombol submitnya sudah punya nilai onclick=”verify();” untuk memastikan semua kolom harus diisi.

    apa bisa digabung mas antara onclick=”verify();” dengan onclick=”show(‘#element’)” ? kalau bisa, bagaimana caranya? terima kasih sekali lagi…

  2. mas kebutulan ini saya mau tanya tentang chat box kayak facebok , saya kan udah download dah coba di aplikasikan dan hasilnya oke , masalahnya gini mas kalau misalnya yang pake cuma beberapa user, misal 10, tuch aplikasi berjalan lalncar tapi ,kalau yang make nya banyak suka nyasar bisa dibilang salah kamar, tolong dong mas minta solusinya saya pusing neh…pleas bls k email saya ya mas… terimaksih

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>