How To Active First Accordion By Dfault

Below is the accordion I have achieved and it looks good now I am trying to assign the first accordion as a default open but I am unable to do. I think i must be done with jquery b

Solution 1:

I have added display: none to the class .accordion_body which will hide the body for each tabs and added a class .active which is added to the html code of first accordion-tab so that its opened by default.

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

.accordion_container {
    width: 100%;
}
.accordion_head {
    background-color:#e74c3c;
    color: white;
    cursor: pointer;
    font-family: 'Abel';
    font-size: 20px;
    margin: 001px0;
    padding: 7px11px;
    padding-left:35px;
    font-weight: bold;
}
.accordion_body {
    font-size: 20px!important;
    display: none;
    background: transparent;
    color:#666;
    padding: 7px11px;
    padding-left:35px;
    padding-right:35px;
}
.accordion_bodyp {
    padding: 18px5px;
    margin: 0px;
}
.plusminus {
  font-size: 20px!important;
    float:right;
}
.active{
display: block;
}


.accordion_containerh5{
  font-family: 'Abel';
  text-transform: uppercase;
  text-align: left;
  color: #666;
  text-shadow: 1px1px#000;
  font-weight: 100;
  font-size: 24px;
  line-height: 20px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="accordion_container"><divclass="accordion_head"><spanclass="glyphicon glyphicon-heart"></span>Accordion #01<spanclass="plusminus">+</span></div><divclass="active accordion_body"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><hr><divclass="accordion_head"><spanclass="glyphicon glyphicon-heart"></span>Accordion #02<spanclass="plusminus">+</span></div><divclass="accordion_body"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><hr><divclass="accordion_head"><spanclass="glyphicon glyphicon-heart"></span>Accordion #03<spanclass="plusminus">+</span></div><divclass="accordion_body"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>

Solution 2:

You can just trigger the click event on the first one after it is loaded, so your new js would look like this.

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

    $(".accordion_head").first().click(); //<-- new line of code
});