CODEWITHSUNDEEP
javascriptjquery
sultan
sultan

Reputation: 41

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>

Upvotes: 3

Views: 17471

Answers (4)

Sulung Nugroho
Sulung Nugroho

Reputation: 1683

For the first block to active, use this approach :

<div class="active">

<a href="#">This is questions...</a>

<div style="display: block">
     <p>This is answer....</p>  
 </div>

</div>

in your case, use increment no++ and use if $no == 1, put the above script. Else remove class active and display: block

Upvotes: 0

Vincenzo Maggio
Vincenzo Maggio

Reputation: 3869

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.

Upvotes: 5

Pseudonym
Pseudonym

Reputation: 2072

I think what you are looking for can be found here:

http://jqueryui.com/accordion/#collapsible

The jquery UI accordian widget seems to do what you want, and when it loads on the page the first one is set to be open automatically

Also the collapsible set from jquery mobile is easy to set a specific one to collapsed or expanded and still have accordian like features

http://demos.jquerymobile.com/1.4.0/collapsibleset/

Upvotes: 0

apohl
apohl

Reputation: 1923

$(".accordian").first().addClass("current");

Upvotes: 1

Related Questions