SO answer

Show/Hide tab content

by Luke Harby

HTML

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

 <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>

     <div id="sandwich" class="hidden">
         <h3>SANDWICHES </h3>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
         <p>Sandwich info</p>
     </div>
     
     <div id="other" class="hidden">
         <h3>OTHER ITEMS</h3>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items info</p>
         <p>Other items...

CSS

a {
    display:block
}

JavaScript

$(".hidden").hide(); 
$("a").on('click', function(){
  var id = $(this).attr("href");
    $('.hidden').hide();
    $(id).show();
      return false;
  });