How do I hide a section of HTML without removing it?

Question

I want to hide a section of HTML, and stop it being viewable from the webpage itself without removing it. Is this possible in HTML or CSS, or can anyone recommend a Javascript library capable of doing this? The part that needs hiding looks similar to this:

<p>text1<strong>text2</strong></p>

I don't want it to display on the website but I do want it viewable when looking at the code directly.

Any ideas?

Answer 1

Add a "hidden" class to select the target HTML and use display: none in CSS:

HTML:

<p class="hidden">text1<strong>text2</strong></p>

CSS:

.hidden {
  display: none;
}

...or you could inline it directly:

<p style="display:none">text1<strong>text2</strong></p>

Answer 2

You can use css display:none

<p style="display: none;">text1<strong>text2</strong></p>

Answer 3

There's a visibility property in CSS: http://www.w3schools.com/cssref/pr_class_visibility.asp

You could wrap whatever elements you want hidden in a <div> and set it's visibility to hidden. This property can also be changed dynamically with Javascript.

You could also look into using jQuery, which has animated hide() and show() functions

Answer 4

I'm not sure what exactly you need, but you can try commenting it out, like:

 <!--<p>text1<strong>text2</strong></p>-->

Or, add a class/id then select it and on css:

.myhidden{
display: none;
}
<p class="myhidden">text1<strong>text2</strong></p>