JQuery Show Hide Attribute

Bagaimana cara mendapatkan nilai dari atribut khusus untuk digunakan dalam kondisi if else? Saya ingin mengganti tombol antara tampilkan & sembunyikan. jika tombol tampilkan diklik maka akan disembunyikan dan tombol sembunyikan muncul. Dan hal yang sama juga terjadi pada hal yang berlawanan. Jadi saya bisa menampilkan sembunyikan untuk div saya.

Untuk kasus menampilkan dan menyembunyikan atribut kita bisa menggunakan JQuery. Penerapan show hide attribute menggunakan jquery banyak digunakan pada halaman Frequently Asked Questions (FAQ) misalnya. Ini dilakukan agar teks tidak melebar kebawah. Jadi hanya atribut yang ingin kita buka saja yang ditampilkan sedangkan atribut yang lainnya bisa disembunyikan.

Dalam tutorial ini kita akan menggunakan tiga elemen yaitu html, css dan javascript. Untuk javascriptnya kita bisa menggunakan library jQuery.

1234567891011121314151617181920<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>

<div class="event_down" id="event_down1" style="display:none">
    Content 1
</div>

<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>

<div class="event_down" id="event_down2" style="display:none">
    Content 2
</div>

<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>

<div class="event_down" id="event_down3" style="display:none">
    Content 3
</div>

HTML

12.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}

CSS

1234567891011121314151617181920$('.show_detail').click(function(){
	var atribut_show = $(this).attr('target');
	$('.hide_detail').each(function(element){
       if($(this).attr("target-hide")==atribut_show){
            $(this).show();
        }
    });
    $(this).hide();
    $('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
	var atribut_hide = $(this).attr('target-hide');
	$('.show_detail').each(function(element){
       if($(this).attr("target")==atribut_hide){
            $(this).show();
        }
    });
    $(this).hide();
    $('#event_down'+atribut_hide).hide();
});

JavaScript

Output Program :