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

Question

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 1

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');

Solution 2

Use the css method of JQuery:

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

Solution 3

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

Comments

[Leem]

Yes, I used, My question is actually on what value should be there? I tried 'none', it hide the border line, but how to show it then? I tried 'solid #cc3' , but it shows the border line with black color

[Rob W]

Use $("fruit-part").css("border", "1px solid #cc3"); to show the border again. If you don't like the empty string to hide the border, use "0 none #fff";

[Leem]

I used, "1px solid #cc3" on firefox, I got black border line

[Rob W]

You should use "1px solid #ccs" if you want to SHOW the border. To completely hide the border, use "0px none #fff". To keep the border, but not show it, use "1px solid #fff" (assuming your background color to be #fff).