Search code examples
javascriptjqueryjquery-selectorscss

How to hide and show div border line in my case?

I have a div element:

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

My css to define the div border color

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

By using jQuery: $('#fruit-part').hide() and $('#fruit-part').show() I can easily hide and show the content inside the div, BUT not the div border line.

As you saw above, my div has a border line with color "#cc3", I am wondering, how to use jQuery to also hide and show the div border line?

Solution

  • Move your CSS properties to a class, and then add/remove that class from fruit-part.

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

#fruit-part {}


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