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?

Apotheosis

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>

Astonishing

Answer 2

You can use css display:none

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

Perlis

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

Theatre

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>

Senescent

Answer 5

Add a class to that section of html and give that class property to be hidden.

Example :

.hidden {
  display:none;
}

<div class="hidden">
  <a href="product.html"><img title="Necklace" alt="Necklace" src="image/product/05-necklace-60x60.jpg"></a>
</div>

Courtesy

Answer 6

I'd also like to suggest this recent video by CSS-Tricks that overviews and explains many techniques to hide an element with CSS: CSS-Tricks Screencast #142: Hiding Things with CSS

Hepsibah

Answer 7

Try this it should turn your text green and is similar to the /* */.

That works the same in CSS

Bionomics