Show dan hide menggunakan Javascript

This post is also available in: English

Hallo apa kabar teman semua, semoga hari ini sehat dan sukses selalu. kali ini kita akan membahas Javascript untuk menampilkan dan menghilangan div.

Baiklah kita akan bahas tutorialnya kali ini, semoga bermanfaat.

Buatlah button yang berbungsi untuk memerintahkan suatu fungsi.

<button type="button" onclick="comment('<?php echo $value->id;?>',this)" class="btn btn-outline-monik fs-14">
<span class="material-icons-outlined md-16 me-2 align-middle">message</span>Comment
</button>

Kita akan jelaskan sedikit tentang button yang telah kita buat. Di sini kita telah menambahkan fungsi onclick=”comment(‘id;?>’,this)”. fungsi ini kia akan pergunakan untuk memrintahkan fungsi javascript.

2. Buatlah div untuk menampilkan form yang kita inginkan.

<div id="<?php echo 'comment_field_'.$value->id ?>" data-postId="<?php echo $value->id?>" class="js-comment-field d-none status-foot row align-items-center">
						<div class="col-md-1 col-sm-2 user-comments">
							<?php if(empty($users->file_name_original)) { ?>
							<img src="<?php echo base_url()?>public/themes/user/images/placehold/user-1x1.png" class="rounded-circle feed-user-img" alt="">
							<?php }else{ ?>
							<img src="<?php echo base_url().$users->file_path . $users->file_name_original?>" class="rounded-circle feed-user-img" alt="">
							<?php } ?>
						</div>
						<div class="col align-items-center pl-sm-0">
							<?php echo "<input type='text' name='comment' id='comment_".$value->id."' class='comment form-control' placeholder='Write a comment...'>"; ?>
						</div>
						<div class="col-2 d-grid">
						<button class="js-publisher btn btn-sm btn-danger mx-auto">
							<span id="" class="js-publisher-stats">Post</span>
							<span id="js-spinner-pub" class="d-none spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
							<span id="js-spinner-load" class="d-none">Loading...</span>
						</button>
						</div>
					</div>

Di sini kita telah membuat form html menggunakan div. saya di sini menggunakan framework bootstrap untuk temanya.

kita menambahkan id untuk memiliki nomor untuk pada tab div yang telah kita buat.
tambahkan class js-comment-field untuk identitas div yang telah kita buat.
dan jangan lupa kita tambahkan class bootstap d-none.

3. Selanjutnya kita tambah fungsi javascript di aplikasi yang kita buat.

function comment(post_id, x) {
	$comment_show = $('#'+post_id).find('.js-comment-field-show');
	$comment.toggleClass('d-none');
}

Fungsi tersebut akan mengambil data dari fungsi button yang telah menyimpan data sebelumnya. dan akan mengeluarkan data sesuai id yang telah di ambil.

Maka hasilnya akan menjadi sebegai berikut.