Looking for a JQuery plug-in similar to Accordion, but that allows multiple sections open at once [closed]

by

Thanks for everyone’s suggestions, but I finally found something on my own that does exactly what I was looking for. I’m adding it as an answer for anyone else who needs something similar.

The Solution
Using the code and sample XHTML here you can extend the JQuery Accordion plug-in to have multiple panels open at once and keep the theming and other functionality provided by the plug-in without recreating the styles.

See the site linked above for a complete example, but here is the meat of the code needed to make the accordion control allow multiple panels to be open. Use the same HTML to define the headers and content as described in the plug-in documentation

    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
        .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
            .click(function() {
                $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                    .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().toggleClass("ui-accordion-content-active").toggle();
                return false;
            })
            .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
    })
    </script>

More Related Contents:

  1. rocking effect in jquery? [closed]
  2. Twitter bootstrap remote modal shows same content every time
  3. Bootstrap carousel multiple frames at once
  4. jQuery Validate – require at least one field in a group to be filled
  5. jQuery UI Autocomplete widget search configuration
  6. fullcalendar multiple cell select on mobile device?
  7. Set width of a “Position: fixed” div relative to parent div
  8. How to disable mouse scroll wheel scaling with Google Maps API
  9. jQuery counter to count up to a target number
  10. How to Extend Twitter Bootstrap Plugin
  11. Remember which tab was active after refresh
  12. How to use a jQuery plugin inside Vue
  13. How can I display a tooltip on an HTML “option” tag?
  14. jqGrid iterate over the grid Data in a subgrid
  15. jQuery multiselect drop down menu
  16. jQuery: How can I show an image popup onclick of the thumbnail?
  17. Can jQuery add commas while user typing numbers?
  18. How to move child element from one parent to another using jQuery [duplicate]
  19. How to launch jQuery Fancybox on page load?
  20. jQuery file upload: Is it possible to trigger upload with a submit button?
  21. jQuery datepicker- 2 inputs/textboxes and restricting range
  22. How can I check if a jQuery plugin is loaded?
  23. Validating array inputs using jquery validation plugin
  24. How to use Plugins for PopUp [closed]
  25. Can someone explain how to implement the jQuery File Upload plugin?
  26. jQuery Webpage Preview [duplicate]
  27. jQuery onchange/onfocus select box to display an image?
  28. In-cell data bars in jqGrid – possible or not?
  29. How can I extend jQueryUI datepicker to accept an additional argument?
  30. Override jQuery .val() function?

Leave a Comment