anatp_123 anatp_123 - 1 month ago 5
jQuery Question

How to expand first div in accordion?

My current accordion container works.
https://jsfiddle.net/c9bwogte/

Im using a query to group the head and body, it works good.
How do I get it to expand the first head by default?
The first head would end up being the current year.

$(document).ready(function () {
//toggle the component with class accordion_body
$(".accordion_head").click(function () {
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(200);
$(".plusminus").text('+');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(200);
$(this).children(".plusminus").text('+');
} else {
$(this).next(".accordion_body").slideDown(200);
$(this).children(".plusminus").text('-');
}
});
});

Answer

You can add .click() at the end to trigger the accordion:

$(".accordion_head").click(function () {
    if ($('.accordion_body').is(':visible')) {
        $(".accordion_body").slideUp(200);
        $(".plusminus").text('+');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
        $(this).next(".accordion_body").slideUp(200);
        $(this).children(".plusminus").text('+');
    } else {
        $(this).next(".accordion_body").slideDown(200);
        $(this).children(".plusminus").text('-');
    }
}).click();

jsFiddle example

Comments