Thursday, September 4, 2025
HomeLanguagesJavascriptp5.js | hide() Function

p5.js | hide() Function

The hide() function is an inbuilt function which is used to hide the current element. Essentially display: none is used for this style.
This function requires p5.dom library. So add the following line in the head section of the index.html file. 
 

javascript




<script language="javascript"
    type="text/javascript" src="path/to/p5.dom.js">
</script>


Syntax: 
 

hide()

Parameters: This function does not accepts any parameters.
Below examples illustrate the hide() function in p5.js:
Example 1: This example uses hide() function to hide the div element. 
 

javascript




function setup() { 
    
    // Create Canvas of given size
    var cvs = createCanvas(600, 250);
}
 
function draw() {
   
  // Set the background color
  background('green');
   
   
  // Use createDiv() function to
  // create a div element
  var myDiv1 = createDiv('neveropen');
   
  // Set the position of div element
  myDiv1.position(170, 30); 
   
  // Set the div size
  myDiv1.size(200, 100);
   
  // Set the font-size of text
  myDiv1.style('font-size', '36px');
   
  // Use createDiv() function to
  // create a div element
  var myDiv = createDiv('A computer science portal for neveropen');
   
  // Set the position of div element
  myDiv.position(180, 80); 
   
  // Set the div size
  myDiv.size(200, 100);
   
  // Set the font-size of text
  myDiv.style('font-size', '24px');
   
  // Set the font-size of text
  myDiv.style('border', '1px solid black');
   
  // Set the font-size of text
  myDiv.style('text-align', 'center');
   
  // Set the font color
  myDiv.style('color', 'white');
   
  // Hide the div element
  myDiv.hide();
   
}


Output: 
 

Example 2: This example uses hide() and show() function to display the div element. 
 

javascript




function setup() { 
    
    // Create Canvas of given size
    var cvs = createCanvas(600, 250);
}
 
function draw() {
   
  // Set the background color
  background('green');
   
   
  // Use createDiv() function to
  // create a div element
  var myDiv1 = createDiv('neveropen');
   
  // Set the position of div element
  myDiv1.position(170, 30); 
   
  // Set the div size
  myDiv1.size(200, 100);
   
  // Set the font-size of text
  myDiv1.style('font-size', '36px');
   
  // Use createDiv() function to
  // create a div element
  var myDiv = createDiv('A computer science portal for neveropen');
   
  // Set the position of div element
  myDiv.position(180, 80); 
   
  // Set the div size
  myDiv.size(200, 100);
   
  // Set the font-size of text
  myDiv.style('font-size', '24px');
   
  // Set the font-size of text
  myDiv.style('border', '1px solid black');
   
  // Set the font-size of text
  myDiv.style('text-align', 'center');
   
  // Set the font color
  myDiv.style('color', 'white');
   
  // Hide the div element
  myDiv.hide();
   
  // Show the div element
  myDiv.show();
}


Output: 
 

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32260 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6626 POSTS0 COMMENTS
Nicole Veronica
11795 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11855 POSTS0 COMMENTS
Shaida Kate Naidoo
6747 POSTS0 COMMENTS
Ted Musemwa
7023 POSTS0 COMMENTS
Thapelo Manthata
6695 POSTS0 COMMENTS
Umr Jansen
6714 POSTS0 COMMENTS