CODEWITHSUNDEEP
javascriptjqueryhtml
Jarg7
Jarg7

Reputation: 1628

jquery to .hide tabs dynamically

Trying to hide tabs inside an accordion and I am trying to use jQuery to do it. Right now the html is as follows:

<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 ...ect
        </ul>
    </div>
    <div class="content" id="p1b">
        <ul class="ssa">
            <li><a ....ect
        </ul>
    </div>
</div>       
</div>  
</dd>
</dl>

How can I select the dl dd tabs for study sheets answer keys and graded assignment answer keys with jQuery?

I was thinking something like:

$(".tabs dd#p1b").hide();

But I realized I can't use ids because there are many tabs per page all with unique ids so I need to select maybe via inner html or something similar, just not sure how? Thanks

Upvotes: 0

Views: 213

Answers (2)

user2205967
user2205967

Reputation: 58

Have you tried using bootstrap? http://getbootstrap.com/javascript/#tabs I believe this was the look you were going for. It is pretty simple to integrate into your website.

Upvotes: 1

Robert
Robert

Reputation: 362

Maybe something like this:

$(".tabs dd").not(".active").hide();

Upvotes: 1

Related Questions