hide and show div tag in JS

-

** Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.


The display property is used to specify how an element is shown on a web page.

Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML elements.


display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.


visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Example

h1.hidden {
  visibility: hidden;

}     



<!DOCTYPE html>

    <html>

    <body>

    

    <button onclick="toggleDiv()">Toggle Div</button>

    

    <div id="myDiv" style="display: none;">This is my div!</div>

    

    <div id="myDiv1" style="display: none;">This is my divjjj!</div>

    

    <script>

    function toggleDiv() {

    y=5;

      var x = document.getElementById("myDiv");

      var x1 = document.getElementById("myDiv1");

      if (y<1) {

        x.style.display = "block";

      } else {

        x1.style.display = "block";

      }

    }

    </script>

    

    </body>

    </html>

Comments

Post a Comment

Popular posts from this blog

image work in springboot

-
 Bean file :         @Lob @Column(length = Integer.MAX_VALUE) private byte[] images;          public byte[] getImages() {           return images;            }          public void setImages(byte[] images) {           this.images = images;            } save image controller :       @PostMapping("/") public String saveHolidayPackage(@ModelAttribute CreateHolidayPackageOne createHolidayPackageOne,               @RequestParam("image") MultipartFile file,HttpSession httpSession) throws IOException { createHolidayPackageOne.setImages(file.getBytes()); createHolidayPackageOneRepo.save(createHolidayPackageOne); return "Admin/CreateHolidayPackageDetails"; } retrieve image from database controller :         ...
Read more

Springboot important annotation

-
Image
  Spring Boot Annotations Spring Boot’s annotations are key to getting up to speed with the framework. They allow you to direct the framework to do your bidding, taking control and overriding its defaults when needed. Annotations are quick, easy to use, and orders of magnitude faster than building the equivalent functionality yourself. You can learn more in Spring’s documentation. The  PDF  or  web  versions are essential reading if you plan on working with Spring Boot. Knowing how to use annotations can level up your game and help you get the most out of the framework. Listed below are several common annotations, some of them with sample code. Spring Boot works with  Java ,  Kotlin , and Groovy. I’ll use Java for the examples in this article. Basic Setup @SpringBootApplication @Configuration @ComponentScan @EnableAutoConfiguration Request Responses @GetMapping @RequestMapping @RequestParam Component Types @Component @Service @Repository @Controller @R...
Read more