display vs visibility

by Pritam Bohra

HTML

<p id="para-1"> Para 1 - provident ratione dolore qui debitis! Eveniet quam consequuntur vitae perspiciatis reprehenderit obcaecati, soluta ducimus quo animi quod modi neque nobis!</p>

<p id="para-2"> Para 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, aut! Deserunt cupiditate officia delectus alias quidem sed rem minima ducimus at, architecto assumenda perferendis quia dolor hic, suscipit ipsam perspiciatis.</p>

<p id="para-3"> Para 3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident laborum voluptates eveniet mollitia, illo nihil odio qui, molestias maiores ipsam natus praesentium, ea debitis non minima, nam pariatur voluptate assumenda.</p>

CSS

#para-2 {
  visibility: hidden;
  /* display: none; */
}

p {
  border: 1px solid red;
}

JavaScript

console.log(document.getElementById("para-2"));