CODEWITHSUNDEEP
javascriptjqueryjquery-selectorscss
Leem
Leem

Reputation: 18318

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?

Upvotes: 1

Views: 11633

Answers (6)

Sai Sreekar Sesham
Sai Sreekar Sesham

Reputation: 1

$('a').click(function() {
  $('#fruit-part').toggle();
});
#fruit-part {
  border: 1px solid #cc3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fruit-part">
  <input type="radio" name="fruits" value="Mango">Mango
  <input type="radio" name="fruits" value="pineapple">Pineapple
</div>

<a href="#">Toggle visibilty</a>

Upvotes: 0

marissajmc
marissajmc

Reputation: 2603

You can just use $('#fruit-part').toggle(); to show and hide the whole div.

Demo - http://jsfiddle.net/hNxQ5/

Upvotes: 0

cheeken
cheeken

Reputation: 34675

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

Upvotes: 5

Jon Adams
Jon Adams

Reputation: 25137

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

Upvotes: 0

Artem Koshelev
Artem Koshelev

Reputation: 10606

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

Upvotes: 2

Rob W
Rob W

Reputation: 349132

Use the css method of JQuery:

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

Upvotes: 3

Related Questions