What is the best way to toggle the visibility of a div's border in my current situation?

Question

What is the best way to toggle the visibility of a div's border in my current situation?

Let's talk about a div element:

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

Here is the CSS that defines the border color of the div

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

With jQuery, using $('#fruit-part').hide() and $('#fruit-part').show(), I can easily hide or show the content within the div, but not the actual border line of the div.

In the example above, the div has a border with the color "#cc3". I'm curious, how can we use jQuery to also hide or show the border of the div?

javascript jquery jquery-selectors css

Answer 1

Answer №1

Transfer your CSS attributes to a designated class and apply or remove that class from the element with the id of fruit-part.

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

#fruit-part {}

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

Answer 2

Transfer your CSS attributes to a designated class and apply or remove that class from the element with the id of fruit-part.

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

#fruit-part {}

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

Answer 3

Answer №2

Implement the css function from JQuery:

$("#vegetable-section").css("border", "none");

Answer 4

Implement the css function from JQuery:

$("#vegetable-section").css("border", "none");

Answer 5

Answer №3

/* Styling */
.noborder { border: 0; }
// Removing border
$('#vegetable-section').addClass('noborder');
// Adding border back
$('#vegetable-section').removeClass('noborder');

Answer 6

/* Styling */
.noborder { border: 0; }
// Removing border
$('#vegetable-section').addClass('noborder');
// Adding border back
$('#vegetable-section').removeClass('noborder');

Answer 7

Answer №4

$('#fruit-section').css('border', '');

and

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

Answer 8

$('#fruit-section').css('border', '');

and

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

Answer 9

Answer №5

To display or hide the entire division, simply utilize $('#fruit-part').toggle();.

Check out this demo - http://jsfiddle.net/abc123/

Answer 10

To display or hide the entire division, simply utilize $('#fruit-part').toggle();.

Check out this demo - http://jsfiddle.net/abc123/

Answer 11

Answer №6

$('a').on('click', function() {
  $('#fruit-part').toggle();
});

#fruit-part {
  border: 2px solid #ff8c00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fruit-part">
  <input type="checkbox" name="fruits" value="Apple">Apple
  <input type="checkbox" name="fruits" value="banana">Banana
</div>

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

Answer 12

$('a').on('click', function() {
  $('#fruit-part').toggle();
});

#fruit-part {
  border: 2px solid #ff8c00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fruit-part">
  <input type="checkbox" name="fruits" value="Apple">Apple
  <input type="checkbox" name="fruits" value="banana">Banana
</div>

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

What is the best way to toggle the visibility of a div's border in my current situation?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What's the best way to center Align Bootstrap 5 Card component?

Placing circular buttons below the navigation bar

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Unable to retrieve embedded link using fetchText function in casperjs

Convert the JSON data received from a jQuery AJAX call into a visually appealing HTML table

Guide to conditionally adding a property to an object in JavaScript

Sleek carousel design with optimal spacing between images

Incorrect configuration file for karma

The art of simulating a service in unit tests for an AngularAMD application

In Typescript, convert an object into a different type while maintaining its keys in the resulting type

Implement a JSON.parse fallback mechanism for an undefined array to prevent any potential exceptions

Dynamic fade effect with GSAP on scroll

Leveraging SystemJS/jspm for loading asynchronous, es5 modules in a production environment

Creating a unique filter function for a Kendo Grid that includes a multi-select column

Is there a way to dynamically change select2 styling using code when a form is submitted?

sending a string of JSON in PHP (including quotes) to an onclick event function

Having trouble dynamically displaying the '<' symbol using JavaScript?

Dealing with customized protocol responses in JavaScript

In Angular 15, CSS override configurations do not function as intended

The AudioPlayer refuses to play following a track change