基于case语句动态打开手风琴

Question

I am trying to select what accordion has the .active class set based on the results of a switch/case statement.

I currently have a switch/case statement set to hide tabs depending on the statement.

<script>
        $(function () {
            $("#accordion-test").accordion({
                collapsible: true,
                active: '#accordion-test .active'

            });
        });
    </script>

<div id="accordion-test">
    <h3 class="content1 one">Content Title</h3>

    <div align="left">
        <p>Content for 1 Goes Here</p>
    </div>
    <h3 class="two">Content Title</h3>

    <div align="left">
        <p>Content for 2 Goes Here</p>
    </div>
    <h3 class="active three">Content Title</h3>

    <div align="left">
        <p>Content for 3 Goes Here</p>
    </div>
</div>

The statement

the session varible is set to one, two or three

      <?php
            switch ($_SESSION['session']) {

                    case "one":
                        ?>
                        <style type="text/css">
                            .two,.three {
                                display: none !important;
                            }
                        </style>
                        <?php
    break;
                    case "one":
                        ?>
                        <style type="text/css">
                            .two,.three {
                                display: none !important;
                            }
                        </style>
                        <?php
break;
                    case "two":
                        ?>
                        <style type="text/css">
                            .one,.three {
                                display: none !important;
                            }
                        </style>
                        <?php
    case "three":
                        ?>
                        <style type="text/css">
                            .one,.two{
                                display: none !important;
                            }
                        </style>
}
                        <?php

with this statement I can show or hide accordion tabs depending on the variable present one,two or three.

I would now like to make the displayed accordion tab active,

for example

case "one":
                        ?>
                        <style type="text/css">
                            .two,.three {
                                display: none !important;
                            }

HAVE ACTIVE STATE APPLIED TO ACCORDION TAB ONE
                        </style>
                        <?php


   <?php
    case "three":
                        ?>
                        <style type="text/css">
                            .one,.two{
                                display: none !important;
                            }
HAVE ACTIVE STATE APPLIED TO ACCORDION TAB THREE
                        </style>
                        <?php

Answer 1

You are trying to bypass using accordion to make its selections and overriding it with styles. That is fighting against the way it should work (using accordion). Instead of generating styles dynamically, just tell the accordion which tab to open at startup.

Here is an example that avoids any server-side generation of styles: http://jsfiddle.net/TrueBlueAussie/d6mSA/1187/

$(function() {
  var $accordion = $("#accordion");
  $accordion.accordion({
    autoHeight: true,
    collapsible: true
  });
  // Open the selected tab from the element
  $accordion.accordion('activate', $accordion.data("selection"));
});

It just picks up a data- attribute with the current selection number in it and tells the accordion to open that one:

 <div id="accordion" data-selection="2">

Or even simpler, just set the active value from the data-:

$(function() {
  var $accordion = $("#accordion");
  $accordion.accordion({
    autoHeight: true,
    collapsible: true,
    active:  $accordion.data("selection")
  });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/d6mSA/1188/