Question

111

accordion issue to open first one automatically

rated 0 times [ 117] [ 6] / answers: 1 / hits: 16705 / 11 Years ago, mon, january 27, 2014, 12:00:00

i want that the first tab should expand automatically mean when i refresh my page the first tab should expand like
General (top header)(-)

lorem ipsum (-)

lorem ipsum doller amu site amu doller

lorem ipsum (+)

lorem ipsum (+)

lorem ipsum (+)

lorem ipsum (+)

......please any one can help....

script is

$(document).ready(function() {

            //Initialising Accordion

            $(.accordion).tabs(.pane, {

                tabs: '> h2',

                effect: 'slide',

                initialIndex: null

            });



            //The click to hide function

            $(.accordion > h2).click(function() {

                if ($(this).hasClass(current) && $(this).next().queue().length === 0) {

                    $(this).next().slideUp();

                    $(this).removeClass(current);

                } else if (!$(this).hasClass(current) && $(this).next().queue().length === 0) {

                    $(this).next().slideDown();

                    $(this).addClass(current);

                }

            });

        });

and html is

 <div class=accordion>

        <h2 style=background-color: #007194; text-align: center;   padding: 0;font-family: 'Raleway',sans-serif;text-transform: uppercase;font-weight: normal;><span style=font-size: 40px;></span><?php echo $value;?> <span> FAQS </span></h2>



       <div class=pane>

            <div class=accordion>

        <?php 



           while($row=mysqli_fetch_array($ret))    

            {

                echo <h2> .$row['question'].</h2>;

                echo <div class='pane'><div class='accordion'><p>.$row['answer'].</p></div></div>;



            }

      ?>



        </div>

        </div>

    </div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacied

Add To Favorites

Follow

Total Points: 124

Total Questions: 84

Total Answers: 98

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

answered 11 Years ago byron · Accepted Answer

You can simply use JQuery Accordion and his active option,like in this:

<html>

<head>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.9.1.js"></script>

  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>

  $(function() {

    $( "#accordion" ).accordion({active: 0);

  });

  </script>

</head>

<body>

    <div id="accordion">

      <h3>First header</h3>

      <div>First content panel</div>

      <h3>Second header</h3>

      <div>Second content panel</div>

    </div>

</body>

</html>

Note that even if I explicitely added active option set to 0, this is the default value.

In your case you should write
JS:

$(document).ready(function() {

            //Initialising Accordion

            $("#accordion").accordion()

            });

HTML

 <div class="accordion">

        <h2 style="background-color: #007194; text-align: center;   padding: 0;font-family: 'Raleway',sans-serif;text-transform: uppercase;font-weight: normal;"><span style="font-size: 40px;"></span><?php echo "$value";?> <span> FAQS </span></h2>



       <div class="pane">

            <div id="accordion">

        <?php 



           while($row=mysqli_fetch_array($ret))    

            {

                echo "<h3> ".$row['question']."</h3>";

                echo "<div class='pane'><div class='accordion'><p>".$row['answer']."</p></div></div>";



            }

      ?>



        </div>

        </div>

    </div>

H3 is used here because is JQuery default, but you can change it in the options.

Also remember that the accordion is applied on the first level of div after the h3 tag, so the div with the pane class in your case.