accordion issue to open first one automatically
Question
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>
4 answers
solution1
2 ACCPTED 2014-01-27 19:51:07
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.
solution2
1 2014-01-27 19:46:12
$(".accordian").first().addClass("current");
solution3
0 2014-01-27 19:46:41
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
solution4
0 2016-08-27 16:54:07
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.