Skip to content
Related Articles

Related Articles

Improve Article

p5.js | hide() Function

  • Last Updated : 08 Jun, 2021

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('GeeksforGeeks');
   
  // 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 geeks');
   
  // 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('GeeksforGeeks');
   
  // 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 geeks');
   
  // 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: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :