Как скрыть и показать границу div в моем случае?

Question

У меня есть элемент div:

<div id="fruit-part">
      <input type="radio" name="fruits" value="apple">Apple
      <input type="radio" name="fruits" value="orange">Orange
</div>

Мой css для определения цвета границы div

#fruit-part {
     border: 1px solid #cc3;
}

Используя jQuery: $('#fruit-part').hide() и $('#fruit-part').show() я могу легко скрыть и показать содержимое внутри div, НО не граничную линию div.

Как вы видели выше, у моего div есть граница с цветом "# cc3", мне интересно, как использовать jQuery, чтобы также скрыть и показать линию границы div?

Answer 1

Переместите ваши свойства CSS в класс, а затем добавьте / удалите этот класс из fruit-part.

.bordered {
    border: 1px solid #cc3;
}

#fruit-part {}

$('#fruit-part').addClass('bordered');
$('#fruit-part').removeClass('bordered');

Answer 2

Используйте метод css JQuery:

$("#fruit-part").css("border", "");

Answer 3

/* CSS */
.noborder { border: 0; }
//Hide border
$('#fruit-part').addClass('noborder');
//Show border
$('#fruit-part').removeClass('noborder');

Answer 4

Вы можете просто использовать $('#fruit-part').toggle();, чтобы показать и скрыть весь div.

Демо - http://jsfiddle.net/hNxQ5/

Answer 5

$('#fruit-part').css('border', ''); и $('#fruit-part').css('border', '1px solid #cc3');