accordion issue to open first one automatically

javascript, jquery

Solution

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.

Problem

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> ```

Original source