I’ve had some difficulty in the last couple of months adding jQuery in to my widget form in the admin area (for ThinkTwit), especially with adding functionality that will let me roll up a group of settings to make it easier for the user to edit them as there are so many. It turned out that this was due to objects being loaded after the page has loaded (see issue and solution).
Having got past this issue, I decided to remove the workaround that I had implemented and have another go at implementing an accordion. My initial thought was to use the jQuery accordion but I noticed on the API page that you can’t use it if you want more than one group open at a time. Instead I borrowed some alternative code from it and was able to implement it as below:
<div class="accordion"> <h3 class="head" style="background: #F1F1F1 url(images/arrows.png) no-repeat right 4px; padding: 4px; border: 1px solid #DFDFDF;">General Settings</h3> <div> // Put your inputs here </div> </div> <script type="text/javascript"> <?php $id = explode("-", $this->get_field_id("widget_id")); ?> jQuery(document).ready(function($) { // Add accordion functionality $('div[id$="{your-widget-name}-"] .accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); }); </script>
Of course, the first line after the script is getting a reference to your widget id – in this case it is used within the form() function but there are other ways to get it.
I hope this comes in use to someone as I know that people regularly land on my site looking in to adding jQuery in to their admin pages.