Ways to effectively conceal an HTML div element with CSS or JavaScript

Question

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery?

I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m

<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
    <label>
      <input type="radio" name="x" value="1" id="x1" onClick="$('#qq').toggleClass('hide')" />1
    </label>
</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
    </label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x3" onClick="$('#qq').toggleClass('hide')" />3
    </label>
</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
    </label>
</div>

The use of display:none doesn't seem to work in this case as well...

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

If you're looking to hide elements on your webpage, there are a few different approaches you can take.

.hide {
    display: none;
}

Alternatively, you could use the following CSS class for hiding elements:

.hide {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

UPDATE:

For a visual example and demonstration, please check out this JSFiddle link: JSFiddle

Answer 2

If you're looking to hide elements on your webpage, there are a few different approaches you can take.

.hide {
    display: none;
}

Alternatively, you could use the following CSS class for hiding elements:

.hide {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

UPDATE:

For a visual example and demonstration, please check out this JSFiddle link: JSFiddle

Answer 3

Answer №2

Incorporating classes and utilizing an event handler instead of inline javascript can enhance the functionality:

$(function() {

  $('.hideOnClick').click(function(){
      $('#qq').toggle();
    
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
    <label>
      <input type="radio" name="x" value="1" id="x1" class="hideOnClick" />1
    </label>
</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x2" class="hideOnClick"  />2
    </label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x3" class="hideOnClick" />3
    </label>
</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
    </label>
</div>

Answer 4

Incorporating classes and utilizing an event handler instead of inline javascript can enhance the functionality:

$(function() {

  $('.hideOnClick').click(function(){
      $('#qq').toggle();
    
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
    <label>
      <input type="radio" name="x" value="1" id="x1" class="hideOnClick" />1
    </label>
</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x2" class="hideOnClick"  />2
    </label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x3" class="hideOnClick" />3
    </label>
</div>
<div class="radio my-radio">
    <label>
        <input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
    </label>
</div>

Answer 5

Answer №3

Here is my solution using jQuery:

$('#qq').hide();

I hope this information proves to be beneficial...

Answer 6

Here is my solution using jQuery:

$('#qq').hide();

I hope this information proves to be beneficial...

Answer 7

Answer №4

In order to hide an element in CSS, all you need to do is modify its display property to none. Just use the display:none statement and you're good to go :)

If you prefer a jQuery solution, you can utilize the hide() method. Here's a complete example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

update: Personally, I find it more convenient to just override the CSS using JavaScript. Wrap this code in a function and attach an onclick event to your button or checkbox referencing the function you created.

document.getElementById("qq").setAttribute("style", "display:none");

Answer 8

In order to hide an element in CSS, all you need to do is modify its display property to none. Just use the display:none statement and you're good to go :)

If you prefer a jQuery solution, you can utilize the hide() method. Here's a complete example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

update: Personally, I find it more convenient to just override the CSS using JavaScript. Wrap this code in a function and attach an onclick event to your button or checkbox referencing the function you created.

document.getElementById("qq").setAttribute("style", "display:none");

Ways to effectively conceal an HTML div element with CSS or JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing the code plugin in conjunction with Popcorn.js

Tips for locating and clicking a specific table element using Selenium

JQuery can be used to query a JSON array

The test is failing to execute the service mock promise due to an issue with the `

disableDefault not functioning properly post-fadeout, subsequent loading, and fade-in of new content with a different URL into

From JSON to PNG in one simple step with Fabric.js

The session name has not been properly defined

Combine filter browsing with pagination functionality

Switch out HTML dynamically using JavaScript/JQuery, embracing the principles of DRY coding

How can I store a value or text to track view counts or a counter efficiently?

Utilize the CakePHP form helper to include an HTML element within a form element

What is the best method to retrieve duplicate fields from a database in HTML5?

Issues with a responsive website not displaying correctly in the Firefox browser

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Image displaying recreation of drop down lists similar to those found on Facebook pop-up windows

When the browser is zoomed out, the panes do not undergo any changes in size

A guide to extracting and storing JSON data in JavaScript variables

Tips for transitioning the li class from active to none

Develop a schema for an array of arrays in NodeJS using mongoose

Show the current Date and Time dynamically using only one line of JavaScript code