Login/Register
Collapse all and still have the first accordion opened by default
Asked Answered
Solved javascriptjqueryjquery-uijquery-ui-accordion
C

1

6

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 [email protected]<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.

Caressive answered 28/5, 2015 at 7:4 Comment(7)
is that what happen now ? in jsfiddle the 1st accordion is expanded initially. – Hipolitohipp
Sorry I hadn't noticed that there were 2 fiddles. I added the fiddle I was talking about to the question. – Caressive
@BartSchelkens remove active:false it will open by default first option – Spinel
Have you checked my answer ?? – Spinel
have you checked my demo ? – Spinel
@BartSchelkens i have added second option with demo . you can use active:false and open first option. – Spinel
OK, in the fiddle-sample it works fine now. Strange thing is that when I run my app, it doesn't work. – Caressive
S
2

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

Spinel answered 28/5, 2015 at 7:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.