how to hide foundation tabs in jquery

Question

Hi guys I have to push a site out live soon but I need to hide tabs in the courses so students don't see the graded assignment tabs via this code. So im trying to select the tabs for study sheet answer keys and graded assignment answer keys heres the code part:

       Panels-->
    <dl class="tabs" data-tab>
    <dd class="active"><a href="#p1a">Study Sheets</a></dd>
    <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
    <dd><a href="#p1c">Graded Assignments</a></dd>
    <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
  </dl>
  <div class="tabs-content">
    <div class="content active" id="p1a">
          <ul class="ss">
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Study/CCAlg1S1StudyU1.PDF">Study Sheet Unit One</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Study/CCAlg1S1StudyU2.PDF">Study Sheet Unit Two</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Study/CCAlg1S1StudyU3.PDF">Study Sheet Unit Three</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Study/CCAlg1S1StudyU4.PDF">Study Sheet Unit Four</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Study/CCAlg1S1StudyU5.PDF">Study Sheet Unit Five</a></li>
          </ul>
    </div>
    <div class="content" id="p1b">
      <ul class="ssa">
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1StudyKey/CCAlg1S1StudyKeyU1.PDF">Study Sheet w/ Answers Unit One</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1StudyKey/CCAlg1S1StudyKeyU2.PDF">Study Sheet w/ Answers Unit Two</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1StudyKey/CCAlg1S1StudyKeyU3.PDF">Study Sheet w/ Answers Unit Three</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1StudyKey/CCAlg1S1StudyKeyU4.PDF">Study Sheet w/ Answers Unit Four</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1StudyKey/CCAlg1S1StudyKeyU5.PDF">Study Sheet w/ Answers Unit Five</a></li>
          </ul>
    </div>
    <div class="content" id="p1c">
      <ul class="ga">
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Graded/CCAlg1S1GradedU1.PDF">Graded Assignment Unit One</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Graded/CCAlg1S1GradedU2.PDF">Graded Assignment Unit Two</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Graded/CCAlg1S1GradedU3.PDF">Graded Assignment Unit Three</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Graded/CCAlg1S1GradedU4.PDF">Graded Assignment Unit Four</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1Graded/CCAlg1S1GradedU5.PDF">Graded Assignment Unit Five</a></li>
     </ul>
    </div>
    <div class="content" id="p1d">
      <ul class="gaa">
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1GradedKey/CCAlg1S1GradedKeyU1.PDF">Graded Assignment w/ Answers Unit One</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1GradedKey/CCAlg1S1GradedKeyU2.PDF">Graded Assignment w/ Answers Unit Two</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1GradedKey/CCAlg1S1GradedKeyU3.PDF">Graded Assignment w/ Answers Unit Three</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1GradedKey/CCAlg1S1GradedKeyU4.PDF">Graded Assignment w/ Answers Unit Four</a></li>
          <li><a href="/paperWork/Math/CCAlgebra1Sem1/CCAlgebra1Sem1GradedKey/CCAlg1S1GradedKeyU5.PDF">Graded Assignment w/ Answers Unit Five</a></li>
          </ul>
    </div>
  </div>       
        </div>  
    </dd>
    </dl>

now im trying to select the tabs with class ssa and gaa and my js is something like:

$(document).ready(function(){
    $("ul>.gaa").hide();
    $("ul>.saa").hide();
   }

i've tried a few other variations but nothing seems to be working. I could just delete the parts but i would like to use js. thanks friends.

Answer 1

//---- wrong declaration of classes .

$(document).ready(function(){

$("ul>.gaa").hide();

$("ul>.saa").hide();

}

//---- I think this is the correct codes. I hope it work!

$(document).ready(function($){

$(".content ul.gaa").hide();

$(".content ul.saa").hide();

}