How can I make a javascript to show drop down

The following assumes you have a setup like this

<ul class="tab-container">
   <li><a data-content=".beef">Beef</a></li>
   ....
</ul>
<div class="tab">
   First tab
   <div class="tab-content beef">This is the beefy bit</div>
</div>
<div class="tab">
  Second tab
   <div class="tab-content beef">This is the beefy bit</div>
</div>
<script>
$(function() {
  $('.tab').click(function() {
     $('.tab-content').hide();
     $('.tab-content ' + $(this).data('content')).show();
  });
});</script>

Select allOpen in new window

Not tested but it demonstrates the concept - post back if you need a working sample.

I actually made this so far but it doesnt seem to work can you check it out for me?

JS:

$(document).ready(function(){
    $("#Tofu").click(function(){
        $("#Tofu1").show();
        $("#Chicken1").hide();
        $("#Beef1").hide();
    });
    $("#Chicken").click(function(){
        $("#Chicken1").show();
        $("#Tofu1").hide();
        $("#Beef1").hide();
    });
    $("#Beef").click(function(){
        $("#Beef1").show();
        $("#Tofu1").hide();
        $("#Chicken1").hide();
    });
});

Select allOpen in new window

Code:

<span class="block textCenter option-select relative">
<span class="dialog flex justifyAround absolute">
<span class="option pointer orange">
<span class="block" id="Tofu"><a href="#Tofu1">Tofu</a></span>
</span>
<span class="option pointer">
<span class="block" id="Chicken"><a href="#Chicken1">Chicken</a></span>
</span>
<span class="option pointer">
<span class="block" id="Beef"><a href="#Beef1">Beef</a></span>
</span>
</span>
</span>



<span class="block textCenter tabs flex justifyBetween">
<ul class="tabs7">
  <li class="uppercase pointer"><a href="#details7">details</a></li>
  <li class="uppercase pointer"><a href="#ingredients7">ingredients</a></li>
  <li class="uppercase pointer"><a href="#nutrition7">nutrition</a></li>
  <li class="uppercase pointer"><a href="#instructions7">instructions</a></li>
</ul>
</span>
<div id="tabContent" class="relative">
<span class="shadow block absolute"></span>
<span class="contentBox block">
<div class="tab8 active" id="details7">
<p class="textLeft details" id="Tofu1">
Teriyaki glazed grilled tofu served over a fluffy bed of sesame basmati rice, garnished with finely chopped scallions.
</p>
<p class="textLeft details none" id="Chicken1">
Teriyaki glazed grilled chicken served over a fluffy bed of sesame basmati rice, garnished with finely chopped scallions.
</p>
<p class="textLeft details none" id="Beef1">
Teriyaki glazed grilled beef served over a fluffy bed of sesame basmati rice, garnished with finely chopped scallions.
</p>
</div>
<div class="ingredients tab8" id="ingredients7">
<div id="Tofu1">
<span class="block OldStandard element">
<h2 class="block textCenter OldStandardItalic">Tofu </h2>
<div class="flex rowWrap justifyBetween OpenSansLight noheight">
<span class="ingredient textCenter">Tofu</span>
<span class="ingredient textCenter">ses</span>
<span class="ingredient textCenter">sc</span>
<span class="ingredient textCenter">Tauce</span>
<span class="ingredient textCenter">sl</span>
<span class="ingredient textCenter">garlil</span>
<span class="ingredient textCenter">rer</span>
<span class="ingredient textCenter">bar</span>
<span class="ingredient textCenter">salt</span>
<span class="ingredient textCenter">white pepper</span>
</div>
</span>
</div>

<div id="Chicken1">
<span class="block OldStandard element">
<h2 class="block textCenter OldStandardItalic">Chicken</h2>
<div class="flex rowWrap justifyBetween OpenSansLight noheight">
<span class="ingredient textCenter"> rice</span>
<span class="ingredient textCenter">salt</span>
</div></span>
</div>

</div>

Select allOpen in new window

It works for the first part but doesn't work for the second one. Just displays the details not the ingredients?

And when I turned them to classes, when I click on "Chicken" for example it takes me to a 404 page with adding /.Chicken1 to the url