Display content without JavaScript

Question

is there a way I can make the content of the a webpage that utilizes jQuery/JavaScript accessible when JavaScript is disabled?

When I click on a h2 header info from the div tags will display using the jQuery function. I have already included a noscript tag to display javaScript is disabled. Can I make the information from the header display when javaScript is turned off?

Thank you

<h1>CLICK ON AN ITEM TO VIEW INFORMATION (Scroll down to view)</h1>
<h2 data-type="pizza">Pizza</h2>
<h2 data-type="sandwich">Sandwiches</h2>
<h2 data-type="other">Other Items</h2>
<h2 data-type="beverage">Beverages</h2>

 <div id="pizza" class="hidden">
 <h3>PIZZA </h3>
 <hr>
 <br>
 <p>
 <strong>Classic:</strong> 
 Beef, Pepperoni, Onions & Mushrooms &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10")$11.40 &nbsp; (12") $14.55
 </p>
 <p>
 <strong>Palace:</strong>
 Sausage, Beef, Pepperoni, Onions & Mushrooms&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10")&nbsp$11.40 &nbsp; (12") $14.55
 </p>
 <p>
 <strong>Philly Steak:</strong>
 Seasoned Steak with Onions, Green Peppers on our Special White Sauce &nbsp (10") $11.40 &nbsp; (12") $14.55 

 </p>
 <p>
 <strong>"B" Special:</strong>
 Sausage, Salami, Canadian Bacon & Onions &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10")&nbsp$11.40 &nbsp; (12") $14.55
 </p>
 <p>
 <strong>Maverick:</strong>
 Sausage, Beef, Canadian Bacon & Pepperoni &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 (10") $11.40 &nbsp; (12") $14.55
 </p>
 </div>

(document).ready(function(){
  $("h2").on('click', function(){
  var id = $(this).attr("data-type");
  $(".hidden").hide();
  $("#"+id+"").toggle();
  });
});

<noscript>
YOUR BROWSER DOES NOT SUPPORT JAVASCRIPT!
</noscript>

Answer 1

Solution: Develop your website from the ground up with Progressive Enhancement in mind.

You might apply this in your case by replacing your h2 tags with anchor tags that link to other pages with the content of your divs on them. For clients with javascript enabled, hook the clicks on those anchors and show pre-existing, hidden content, or dynamically load it with ajax.

Answer 2

Further to my comment above here is an answer:

You can place a redirect in the noscript tags to redirect to non-js dependent content.

<noscript>
    <meta http-equiv="refresh" content="0; url=http://yourwebsite.com/your-alternative-content/" />
</noscript>`