How to open all accordion by default on page load in javascriptltdiv class3434gt ltbutton class34accordion34 ngclick3434gt ltbgtSEARCH BY MONTHltbgtltbuttongt ltdiv class34panel34gt ltltpgt ltlabel for34amount34gtMonth rangeltlabelgt ltpgtgt ltinput type34text34 id34amount34 readonly style34border 0 co

Hi skpCheck this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegtltheadgtltbodygt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsmaxcdnbootstrapcdncombootstrap332jsbootstrapminjs34gtltscriptgt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs178angularminjs34gtltscriptgt ltstyle type34textcss34gt Style the buttons that are used to open and close the accordion panel accordion margintop 25px marginbottom 25px

Keep All Bootstrap Accordion Panes open by default on Page Load in JavaScript

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Nov 12, 2019 03:22 AM
Forum: JavaScript
Answer: 1
Views: 7504
Sample Code: Download

How to open all accordion by default on page load in javascript

<div class="">
    <button class="accordion" ng-click="">
        <b>SEARCH BY MONTH</b></button>
    <div class="panel">
        <!--<p>
                                <label for="amount">Month range:</label>
                            </p>-->
        <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;
            width: 100%">
        <div id="slider-range">
        </div>
        <br />
        <!--Start DateTime : <span id="lblStartDateTime"></span><br />
                            End DateTime : <span id="lblEndDateTime"></span>-->
    </div>
    <hr />
    <button class="accordion" ng-click="">
        <b>SEARCH BY DIVISION</b></button>
    <div class="panel" style="margin-top: 1rem">
        <table>
            <tr ng-repeat="div in divisions">
                <td>
                    <input type="checkbox">
                </td>
                <td style="padding-left: 5px">
                    {{div.DIVISION}}
                </td>
            </tr>
        </table>
        <br />
    </div>
    <hr />
    <button class="accordion" ng-click="">
        <b>SEARCH BY MODEL</b></button>
    <div class="panel" style="margin-top: 1rem">
        <table>
            <tr ng-repeat="model in models">
                <td>
                    <input type="checkbox">
                </td>
                <td style="padding-left: 5px">
                    {{model.PRODSHORTNAME}}
                </td>
            </tr>
        </table>
        <br />
    </div>
    <hr />
    <button class="accordion" ng-click="">
        <b>SEARCH BY MACHINE</b></button>
    <div class="panel">
        Lorem ipsum...
        <br />
    </div>
    <hr />
    <button class="accordion" ng-click="">
        <b>SEARCH BY CUSTOMER</b></button>
    <div class="panel" style="margin-top: 1rem">
        <!--<form class="form-inline my-2 my-lg-0 ml-auto">
            <angucomplete-alt id="txtinvnumber"
                              placeholder="Search Customer Name"
                              pause="100"
                              selected-object="Selectcustomer"
                              remote-url="http://stagingserver:85/EBSApi/api/Warehouse/getAllCustomers"
                              remote-url-data-field=""
                              local-data="warehouse"
                              search-fields="CUSTOMERSHORTNAME"
                              title-field="CUSTOMERSHORTNAME"
                              minlength="1"
                              input-class="form-control mr-sm-2"
                              match-class="highlight"
                              ng-click="Search()"></angucomplete-alt>
        </form>-->
        <table>
            <tr ng-repeat="wh in warehouse">
                <td>
                    <input type="checkbox" class="" ng-change="copy($index)" ng-model="wh.hasChecked">
                </td>
                <td style="padding-left: 5px">
                    {{wh.CUSTOMERSHORTNAME}}
                </td>
            </tr>
        </table>
        <br />
    </div>
    <hr />
    <button class="accordion" ng-click="">
        <b>SEARCH BY COMPONENT</b></button>
    <div class="panel" style="margin-top: 1rem">
        <table>
            <tr ng-repeat="cp in customerParts">
                <td>
                    <input type="checkbox">
                </td>
                <td style="padding-left: 5px">
                    {{cp.PARTNAME}}
                </td>
            </tr>
        </table>
        <br />
    </div>
</div>

        var acc = document.getElementsByClassName("accordion");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                this.classList.toggle("active");
                /* Toggle between hiding and showing the active panel */
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Nov 13, 2019 01:09 AM
Report

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style type="text/css">
        /* Style the buttons that are used to open and close the accordion panel */
        .accordion
        {
            /*margin-top: 25px;
            margin-bottom: 25px;*/
            background-color: #fff;
            color: #444;
            cursor: pointer;
            padding: 10px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
            font-size: 12px;
        }
        
        /* Add a background color to the button if it is clicked on (add the .active class with JS), 
            and when you move the mouse over it (hover) */
        .active, .accordion:hover
        {
            background-color: #eee;
        }
        
        /* Style the accordion panel. Note: hidden by default */
        .panel
        {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;
        }
        
        button.accordion::after
        {
            content: '\002B';
            color: #777;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }
        
        button.accordion.active::after
        {
            content: "\2212";
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var acc = document.getElementsByClassName("accordion");
            for (var i = 0; i < acc.length; i++) {
                // Add the active class to open by default.
                acc[i].classList.add("active");
                var panel = acc[i].nextElementSibling;
                panel.style.display = "block";
                acc[i].addEventListener("click", function () {
                    /* Toggle between adding and removing the "active" class,
                    to highlight the button that controls the panel */
                    this.classList.toggle("active");
                    /* Toggle between hiding and showing the active panel */
                    var panel = this.nextElementSibling;
                    if (panel.style.display === "block") {
                        panel.style.display = "none";
                    } else {
                        panel.style.display = "block";
                    }
                });
            }
        }

        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope) {
            $scope.divisions = [{ DIVISION: 1 }, { DIVISION: 2}];
            $scope.models = [{ PRODSHORTNAME: "Model 1" }, { DIVISION: "Model 2"}];
            $scope.warehouse = [{ CUSTOMERSHORTNAME: "Name 1", hasChecked: true }, { CUSTOMERSHORTNAME: "Name 2", hasChecked: false}];
            $scope.customerParts = [{ PARTNAME: "Part 1" }, { PARTNAME: "Part 2"}];
            $scope.copy = function (index) {
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <button type="button" class="accordion" ng-click="">
            <b>SEARCH BY MONTH</b></button>
        <div class="panel">
            <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;
                width: 100%" value="100" />
            <div id="slider-range">
            </div>
            <br />
        </div>
        <hr />
        <button type="button" class="accordion" ng-click="">
            <b>SEARCH BY DIVISION</b></button>
        <div class="panel" style="margin-top: 1rem">
            <table>
                <tr ng-repeat="div in divisions">
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td style="padding-left: 5px">
                        {{div.DIVISION}}
                    </td>
                </tr>
            </table>
            <br />
        </div>
        <hr />
        <button type="button" class="accordion" ng-click="">
            <b>SEARCH BY MODEL</b></button>
        <div class="panel" style="margin-top: 1rem">
            <table>
                <tr ng-repeat="model in models">
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td style="padding-left: 5px">
                        {{model.PRODSHORTNAME}}
                    </td>
                </tr>
            </table>
            <br />
        </div>
        <hr />
        <button type="button" class="accordion" ng-click="">
            <b>SEARCH BY MACHINE</b></button>
        <div class="panel">
            Lorem ipsum...
            <br />
        </div>
        <hr />
        <button type="button" class="accordion" ng-click="">
            <b>SEARCH BY CUSTOMER</b></button>
        <div class="panel" style="margin-top: 1rem">
            <table>
                <tr ng-repeat="wh in warehouse">
                    <td>
                        <input type="checkbox" class="" ng-change="copy($index)" ng-model="wh.hasChecked" />
                    </td>
                    <td style="padding-left: 5px">
                        {{wh.CUSTOMERSHORTNAME}}
                    </td>
                </tr>
            </table>
            <br />
        </div>
        <hr />
        <button type="button" class="accordion" ng-click="">
            <b>SEARCH BY COMPONENT</b></button>
        <div class="panel" style="margin-top: 1rem">
            <table>
                <tr ng-repeat="cp in customerParts">
                    <td>
                        <input type="checkbox">
                    </td>
                    <td style="padding-left: 5px">
                        {{cp.PARTNAME}}
                    </td>
                </tr>
            </table>
            <br />
        </div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Keep All Bootstrap Accordion Panes open by default on Page Load in JavaScript

Company

Explore

Follow us

Contact Us