Collapse all and still have the first accordion opened by default

元气小坏坏 提交于 2019-12-23 12:46:47

问题


I was trying to work with the jquery accordion. I'm using the jsfiddle which is in this question : jQuery UI Accordion Expand/Collapse All

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kaneka Extranet CustomerDocs</title>
    <link href="/Content/screen.css" rel="stylesheet"/>
<link href="/Content/fonts.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

    <script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>

    <script src="/Scripts/jquery-ui-1.10.4.js"></script>

    <script type="text/javascript" src="http://use.typekit.com/omm2ava.js"></script>
    <script type="text/javascript"> try { Typekit.load(); } catch (e) { }</script>

</head>
<body class="page">
    <script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>



    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(function () {
                $(".accordion").accordion({
                    collapsible: true,
                    heightStyle: "content",
                    active: false
                });
                var icons = $(".accordion").accordion("option", "icons");
                $('.open').click(function () {
                    $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
                        'aria-selected': 'true',
                        'tabindex': '0'
                    });
                    $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
                    $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
                        'aria-expanded': 'true',
                        'aria-hidden': 'false'
                    }).show();
                    $(this).attr("disabled", "disabled");
                    $('.close').removeAttr("disabled");
                });
                $('.close').click(function () {
                    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
                        'aria-selected': 'false',
                        'tabindex': '-1'
                    });
                    $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
                    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
                        'aria-expanded': 'false',
                        'aria-hidden': 'true'
                    }).hide();
                    $(this).attr("disabled", "disabled");
                    $('.open').removeAttr("disabled");
                });
                $('.ui-accordion-header').click(function () {
                    $('.open').removeAttr("disabled");
                    $('.close').removeAttr("disabled");
                });
                $('h1:eq(0)').trigger('click');
                $('h2:eq(0)').trigger('click');
            });

    </script>

    <style type="text/css">
        .accordion-expand-holder {
            margin: 10px 0;
        }

        .accordion-expand-holder .open, .accordion-expand-holder .close {
            margin: 0 10px 0 0;
        }

    </style>



    <div class="bgborder-top"></div>
    <div id="container">
        <div id="header">
            <a id="kanekalogo" href="/"><img src="/images/logo_kaneka.png" alt="" /></a>
            <div id="topnav"></div>
            <div id="top">
                <div id="breadcrumbs">


        <a href="/" title="Home">Home</a>
         &gt; 

    Documents

                </div>
            </div>
        </div>
        <div id="leftcontainer">
            <a id="clientlogin" href="/Account/Login">Client Login</a>
        </div>
        <div id="content">



<h1>Documents Overview</h1>

Welcome bschelkens@hotmail.com<br />

<div class="accordion-expand-holder">
    <div class="form-row">
        <table>
            <tr>
                <td>
<form action="/Documents" method="post">                        <p>
                            <label for="SearchCriteria">Search</label>
                            <input id="SearchCriteria" name="SearchCriteria" type="text" value="" />

                            <input type="image" width="25" src="/Images/search-icon.png" alt="Search documents" title="Search Documents">

                        </p>
</form>                </td>
                <td>
                    <input type="image" width="25" src="/Images/expandAll.png" alt="Expand All" title="Expand All" class="open">
                </td>
                <td>
                    <input type="image" width="25" src="/Images/collapseAll.png" alt="Collapse All" title="Collapse All" class="close">
                </td>
            </tr>
        </table>
    </div>
</div>



<div class="accordion">
    <h1>High Performance Polymers</h1>
    <div>
        <div class="accordion">
            <h1>Safety Data Sheet</h1>
            <div>
                Here comes text.
            </div>
        </div>
        <div class="accordion">
            <h1>Technical Data Sheet</h1>
            <div>
                Here comes somes other text
            </div>
        </div>
    </div>
</div>
<div class="accordion">
    <h1>Eperan</h1>
    <div>
        <div class="accordion">
            <h1>Safety Data Sheet</h1>
            <div>
                Here comes some ohter text
            </div>
        </div>
        <div class="accordion">
            <h1>Technical Data Sheet</h1>
            <div>
                Some other text.
            </div>
        </div>
    </div>
</div>



        </div>
        <div class="push"></div>
    </div>
    <div id="footer" class="bgborder-bottom">
        <div id="footer-container"></div>
    </div>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"InternetExplorer","requestId":"09c25ea2edd34132bcec5a536592ad9c"}
</script>
<script type="text/javascript" src="http://localhost:6824/5b10ce23a3a348e29f74f46dd49ecc51/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

https://jsfiddle.net/bschelkens/5w3Lb9pv/14/

Above is wat my page looks like. For some reason when i try my fiddle, it does what I'm expecting. But in my code this doesn't work.


回答1:


remove active:false it will open first option by default.

see DEMO

 $("#accordion").accordion({
    collapsible:true,
 });

second option with active:false. trigger click event at the end of code.

     $('h3:eq(0)').trigger('click');

see DEMO



来源:https://stackoverflow.com/questions/30499419/collapse-all-and-still-have-the-first-accordion-opened-by-default

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!