How to use the css() method In JQuery
The css() method be used to hide and show a div by passing the display property with block and none values as parameters according to the current condition.
Syntax:
$('elemen_selector').css('display', 'none');
$('elemen_selector').css('display', 'block');
Example: The below code example implements the css() method to toggle the div element through toggle button.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> How to create canvas of the same size as a div in a grid? </title> <style> .container { display: grid; grid-template-columns: 100%; grid-template-rows: 100px; height: 100%; width: 100%; text-align: center; } .toggle-outer{ height: 20px; width: 50px; border-radius: 20px; border: 1px solid #ccc; background-color: #f4f4f4; margin: auto; position: relative; transition: all 0.3s ease-in; cursor: pointer; } .toggle-outer.checked{ background-color: blue; } .toggle-inner{ height: 18px; width: 18px; border-radius: 50%; position: absolute; left: 0; background-color: #fff; border: 1px solid #ccc; transition: all 0.3s ease-in; } .toggle-outer.checked .toggle-inner{ left: 30px; } input[type="checkbox"]{ display: none; } #toggleLabel{ cursor: pointer; } #result{ display: none; } </style></head><body> <div class="container"> <h1 style="color: green;"> w3wiki </h1> <h3> Toggle the div element by clicking the below toggle button. </h3> <div class="toggle-outer"> <div class="toggle-inner"> <input type="checkbox" id="toggle"> </div> </div> <label id="toggleLabel" for="toggle"> ON </label> <div id="result"> <h3> This is the div that toggles on click <br/> to the above toggle button. </h3> </div> </div> <!-- jQuery CDN Link --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <!-- Custom Script --> <script> $(document).ready(() => { $('.toggle-outer').click(function(){ $(this).toggleClass('checked'); const res = $('#result'); if(res.css('display') === 'none'){ $('#toggle').attr('checked', true); $('#toggleLabel').text('OFF'); res.css('display', 'block'); } else{ $('#toggle').attr('checked', false); $('#toggleLabel').text('ON'); res.css('display', 'none'); } }) }); </script></body></html> |
Output:
How to Create a Toggle to Show/Hide Divs in jQuery ?
A toggle button acts like a switch to hide and show the HTML elements. If a toggle button is ON, it will show the div element. Otherwise, it will hide the element just like a switch, if it gets ON the supply will start, otherwise, it stops the supply. We can use the below approaches to create a toggle button in jQuery.
Table of Content
- Using the hide() and show() methods
- Using the toggle() method
- Using the css() method