Click here to Skip to main content
13,297,048 members (62,043 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 4 Oct 2012

jQuery UI Accordion - Cancel Change

, 4 Oct 2012
Rate this:
Please Sign up or sign in to vote.
Simple way to prevent users from changing the active panel on the jQuery UI Accordion control


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.


<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>



$("#myaccordion h3")
    .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 | :)


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


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


About the Author

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

Find more at on my blog.

You may also be interested in...

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 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171207.1 | Last Updated 4 Oct 2012
Article Copyright 2012 by AlexCode
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid