Click here to Skip to main content
15,171,873 members
Articles / Programming Languages / Javascript
Tip/Trick
Posted 4 Oct 2012

Stats

13.4K views
3 bookmarked

jQuery UI Accordion - Cancel Change

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
4 Oct 2012CPOL
Simple way to prevent users from changing the active panel on the jQuery UI Accordion control

Introduction

jQuery UI Accordion is a great control out-of-the-box but as usual it's not enough, we always need more!
So here's the thing: I needed a simple way, without much hacking, to let me handle if the user could expand/collapse a panel or not.
If you look around, there are some ideas but I couldn't find one that actually consistently worked so here's my way of doing it.

Using the Code

The idea is to handle the header click and this way decide to activate the panel or not. In the sample code, just use the checkbox to lock or unlock the panels activation.

Here's the jsfille link and the same code below.

HTML

HTML
<input id="chkLock" type="checkbox"/>
<label for="chkLock">Lock Accordion</label>

<div id="myaccordion">
    <h3>Header 1</h3>
    <div>Content 1</div>
    <h3>Header 2</h3>
    <div>Content 2</div>
    <h3>Header 3</h3>
    <div>Content 3</div>
</div>

JavaScript

JavaScript
$('#myaccordion').accordion();

$("#myaccordion h3")
    .off('click')
    .on('click', function(){
        if ($('#chkLock').prop('checked') == false) {
            var index = $('#myaccordion h3').index(this);
            $('#myaccordion').accordion("activate", index);
        }
    });

Points of Interest

There are always multiple ways of doing the same thing, the difficulty is finding the simplest one. Smile | :)

History

First version!
Hope to hear from you guys about even simpler solutions!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AlexCode
Architect
Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

Comments and Discussions

 
Questionjquery.nestedAccordion.js Pin
adis4112-Dec-13 9:14
Memberadis4112-Dec-13 9:14 
QuestionNested Jquery Accordion - Sample Pin
adis4112-Dec-13 9:05
Memberadis4112-Dec-13 9:05 
ASP.NET
<head runat="server">
    <title></title>
    <style type='text/css'>
        *
        {
            margin: 0;
            padding: 0;
        }
        #main
        {
            color: #333;
            font: 76%/1.6 verdana,geneva,lucida, 'lucida grande' ,arial,helvetica,sans-serif;
            text-align: left;
            position: relative;
            min-height: 0;
        }
        #main p
        {
            margin: 0 10px 1em;
        }
        #main .strong
        {
            font-weight: 700;
        }
        #main .clear
        {
            clear: both;
        }
        #main img
        {
            border: 0 none;
        }
        
        /* --- Headings --- */
        #main h1
        {
            font-family: georgia, 'times new roman' ,times,serif;
            font-size: 2.5em;
            font-weight: normal;
            color: #f60;
        }
        
        #main h1, #main h2, #main h3
        {
            margin-bottom: 1em;
        }
        
        #main h2, #main h3, #main h4 a, #main h5 a
        {
            padding: 3px 10px;
        }
        
        #main h2, #main h3, #main h4, #main h5
        {
            font-size: 1em;
        }
        
        #main h2
        {
            background-color: #f0f0f0;
        }
        
        /* --- Links --- */
        #main a
        {
            padding: 1px;
            border: 1px solid #e0e0e0;
            color: #05b;
        }
        
        #main a:hover, #main a:focus, #main a:active
        {
            border-color: #bcd;
            text-decoration: none;
            outline: 0 none;
        }
        
        /* --- Accordion --- */
        .js #main .accordion
        {
            visibility: hidden;
        }
        .accordion
        {
            margin: 0;
            padding: 0 10px;
        }
        .accordion li
        {
            list-style-type: none;
        }
        .accordion li.last-child
        {
            margin-left: 19px;
            list-style-type: disc;
        }
        .accordion .outer
        {
            border: 1px solid #dadada;
            border-width: 0 1px 1px;
            background: #fff;
        }
        .accordion .inner
        {
            margin-bottom: 0;
            padding: .5em 20px 1em;
            position: relative;
            overflow: hidden;
        }
        /*.accordion .inner .inner
        {
            padding-bottom: 0;
        }*/
        .accordion .h
        {
            padding-top: .3em;
        }
        /* vertical padding instead of vertical margin (ie8) */
        .accordion p
        {
            margin: .5em 1px 1em;
        }
        
        /*  
  Add styles for all links in the 'accordion':
.accordion a {...}
*/
        
        #main a.trigger
        {
            display: block;
            padding-left: 20px;
            background-image: url(Img/plus.gif);
            background-repeat: no-repeat;
            background-position: 1px 50%;
            font-weight: 700;
        }
        
        #main a.trigger.open
        {
            background-image: url(Img/minus.gif);
        }
        
        #main .last-child a.trigger
        {
            padding-left: 1px;
            background-image: none;
            font-weight: normal;
        }
        
        #main a.trigger
        {
            background-color: #f0f0f0;
        }
        
        #main a.trigger.open
        {
            border-color: #dadada;
            background-color: #e7e7e7;
        }
        
        #main a:hover.trigger.open, #main a:focus.trigger.open, #main a:active.trigger.open
        {
            border-color: #bcd;
        }
    </style>
    <!--[if lte IE 6]>
<style type='text/css'>
  * html #main, * html #container, #side a, a.trigger, .accordion .inner {height:1%}
  #lenta{height:52px}
</style>
<script type="text/javascript">
   try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
</script>
<![endif]-->
    <!--[if lte IE 7]>
<style type="text/css">
  .accordion .inner {position:static; overflow:visible}
</style>
<![endif]-->
    <!--[if !lt IE 6]><!-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="Scripts/jquery.nestedAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">
<!--        //--><![CDATA[//><!--
        $("html").addClass("js");
        $.fn.accordion.defaults.container = false;
        $(function () {
            $("#acc1").accordion({
                el: ".h",
                head: "h4, h5",
                next: "div",
                initShow: "div.outer:eq(1)"
            });
            $("html").removeClass("js");
        });
        //--><!]]>
    </script>
    <!--<![endif]-->
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
        <ul id="acc1" class="accordion">
            <li>
                <h4 class="h">
                    <a class="trigger open" href="#">Heading 1</a></h4>
                <div class="outer shown" style="display: block;">
                    <div class="inner shown">
                        <p>
                            Sample Text</p>
                        <ul>
                            <li>
                                <h5 class="h">
                                    <a class="trigger open" href="#">Heading a</a></h5>
                                <div class="outer shown" style="display: block;">
                                    <div class="inner shown">
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute
                                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.
                                        </p>
                                        <ul>
                                            <li>
                                                <h5 class="h">
                                                    <a class="trigger open" href="#">Heading b</a></h5>
                                                <div class="outer" style="display: block;">
                                                    <div class="inner shown">
                                                        <p>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute
                                                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                                            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                                            deserunt mollit anim id est laborum.
                                                        </p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>

adi


modified 12-Dec-13 14:15pm.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.