jquery - if condition with css: setting a border and removing when clicked consequently -

i have , dislike objects. 1 clicked wanna display border around it, works perfectly. if clicked again, want border disappear. used if condition .css not worked. .css("border-width") returns empty when print alert function. problem? works other this.

$('a[id*="grd_wallposts_lbtn_likedislike_like"]').click(function () {              if ($(this).children('#imglikedislike_like').css("border-width") == "1px") {                  $(this).children('#imglikedislike_like').css("border-width", "0px");              } else {                                      $(this).children('#imglikedislike_like').css("border-width", "1px");                 $(this).children('#imglikedislike_like').css("border-style", "solid");                 $(this).children('#imglikedislike_like').css("border-color", "#b9b9b9");                  var = $(this).attr("id");                 = a.replace("grd_wallposts_lbtn_likedislike_like_", "");                 $('#grd_wallposts_lbtn_likedislike_dislike_' + a).children('#imglikedislike_dislike').css("border-width", "0px");             }         }); 

i might use class set clicked state like

<a class="grd_wallposts_lbtn_likedislike_like">     <span class="imglikedislike_like">like</span> </a> <a class="grd_wallposts_lbtn_likedislike_dislike">     <span class="imglikedislike_dislike">dislike</span> </a> 

then

.clicked {     border: 1px solid #b9b9b9; } 

and

$('.grd_wallposts_lbtn_likedislike_like').click(function () {     $(this).children('.imglikedislike_like').toggleclass('clicked');     $(this).next().children('.imglikedislike_dislike').removeclass('clicked'); }); $('.grd_wallposts_lbtn_likedislike_dislike').click(function () {     $(this).children('.imglikedislike_dislike').toggleclass('clicked');     $(this).prev().children('.imglikedislike_like').removeclass('clicked'); }); 

demo: fiddle