sultan sultan - 3 months ago 9
Javascript Question

accordion issue to open first one automatically

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>

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.