css - Tabs in Accordion not styling properly -
so when there's 1 accordion dd (item content, lack of better term) , code active when page loads, functions expected , active tab-title highlighted.
but when there's more 1 accordion dd , they're loaded unactive, clicked on, active tab-title doesn't highlight until clicked on again.
here's solution think need: in foundation.css, when accordion content active, want make first tab tab-title , content active. thoughts?
<div class="row"> <div class="small-12 small-centered columns"> <dl class="accordion" data-accordion> <dd id="mealrow_55" class='active'> <a href="#meal_55">sweet , sour chicken <span class='secondary round label'>shared</span> <span class="tag-right"> tags: asian, chicken</span></a> <div id="meal_55" class="content active"> <div class="row"><div class="small-12 large-4 columns" style="font-size:80%;"> <dl class="tabs" data-tab> <dd class="tab-title active"><a href="#i_55" style="font-size:85%;">ingredients</a></dd> <dd class="tab-title"><a href="#s_55" style="font-size:85%;">shopping list</a></dd> </dl> <div class="tabs-content"> <div class="content active" id="i_55"> 3-5 chicken breast<br>salt , pepper<br>1 cup cornstarch<br>2 eggs, beaten<br>1/3 cup canola oil<br>3/4 cups white sugar<br>4 tablespoons ketchup<br>1/2 cup white distilled vinegar<br>1 tablespoon soy sauce<br>1 teaspoon garlic salt<br> </div> <div class="content" id="s_55"> 3-5 chicken breast<br>salt , pepper<br>1 cup cornstarch<br>2 eggs, beaten<br>1/3 cup canola oil<br>3/4 cups white sugar<br>4 tablespoons ketchup<br>1/2 cup white distilled vinegar<br>1 tablespoon soy sauce<br>1 teaspoon garlic salt<br> </div> </div> </div> </div> </dd> </dl> </div> </div>
Comments
Post a Comment