Css 手风琴中的制表符样式不正确

因此，当只有1个accordion dd（带有内容的项目，缺少更好的术语）并且我将其编码为在页面加载时处于活动状态时，所有功能都会按预期运行，并且活动选项卡标题会正确高亮显示

但是，当有超过1个accordion dd时，它们被加载为非活动状态，然后单击，活动选项卡标题在再次单击之前不会高亮显示

这是我需要的解决方案：在基础.CSS中，当手风琴内容活跃时，我希望使第一个选项卡标题和内容活跃。想法

<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 and Sour Chicken   &nbsp;&nbsp; <span class='secondary round label'>Shared</span> <span class="tag-right">&nbsp; 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 and 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 and 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>

3-5个鸡胸
盐和胡椒
1杯玉米淀粉
2个鸡蛋，搅拌
1/3杯菜籽油
3/4杯白糖
4汤匙番茄酱
1/2杯蒸馏白醋
1汤匙酱油
1茶匙大蒜盐

3-5个鸡胸
盐和胡椒
1杯玉米淀粉
2个鸡蛋，搅拌
1/3杯菜籽油
3/4杯白糖
4汤匙番茄酱
1/2杯蒸馏白醋
1汤匙酱油
1茶匙大蒜盐