Removing <div> if Javascript is disabled

Question 1

This would work

<div class="hidden">
  <ul>
    <li>Menu Item 1
    <li>Menu Item 2
    <li>Menu Item 3
  </ul>
</div>

.hidden {
  display: none;
}
$(function()
{
  $(".hidden").show();
});

Question 2

You might be better going the other way and only displaying it if javascript is enabled.

Create a class something like the below...

.JSenabled {display:none}

Toggle class on $(document).ready() using $('.JSenabled').show().

Add this class to any elements you want to hide when JS is unavailable.

You'll also need to link the jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Question 3

You can hide the ul with css, and then use javascript to show it.

In this way, the ul will not show if the javascript is disabled, because it is hidden my the css.

jQuery Way:

HTML:

<ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
</ul>

CSS:

ul {
    display: none;
}

jQuery:

$(document).ready(function() }
   $('ul').show();
});

When using jQuery, remember to put the jQuery libery in the <head> section of your pages:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

jQuery Fiddle

Plain Javascript Way:

If you don't want to use jQuery, but plain javascript you can add an ID to your <ul> and then show it with javascript like this:

HTML:

<ul id="menu">
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
</ul>

CSS:

ul {
    display: none;
}

Javascript:

document.getElementById('menu').style.display = "block";

Plain Javascript Fiddle

Question 4

You can add a "hidden" css id and then only show that object if javascript if enabled:

HTML:

<div class="hidden" id="hiddenDiv">
  <ul>
    <li>Menu Item 1
    <li>Menu Item 2
    <li>Menu Item 3
  </ul>
</div>

CSS:

#hiddenDiv{
  display: none;
}

Javascript

window.onload = function() {
    document.getElementById('hiddenDiv').style.display = "block";
};