WordPress.org

Ready to get started?Download WordPress

Forums

jQuery UI Widgets
[resolved] ACCORDIAN DOES NOT WORK (6 posts)

  1. ttridley
    Member
    Posted 2 years ago #

    Hi
    I'm using twentyten theme & wp 3.4.1, but your ACCORDIAN DOES NOT WORK. The headings are hyperlinked but they do nothing when clicked. EG the text does not hide. I have copied the code exactly from the website, (below) and setup the plugin correctly. Tabs work well. What is going on with the accordian ?

    <div id="accordion">
    	<h3><a href="#">Section 1</a></h3>
    	<div>
    		<p>
    		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    		</p>
    	</div>
    </div>

    http://wordpress.org/extend/plugins/jquery-ui-widgets/

  2. Marventus
    Member
    Posted 2 years ago #

    Hi.
    Could you share a link to your site? I'd like to see what is going on and if jQuery UI is loading properly.
    Cheers!

  3. mikejcsmith
    Member
    Posted 1 year ago #

    Hi,
    Might be able to help here.

    Change
    <div id="accordion">
    to
    <div class="accordion">

    Cheers!

  4. mikejcsmith
    Member
    Posted 1 year ago #

    Also,
    I wanted the accordion panels to keep their own height, which is not the default functionality. By default all panels take the height of the tallest panel. That's a jQueryUI thing, and no fault of this plugin.

    To get this you need set the autoheight to false.
    Change:
    $default_accordion_init = "\r\n$( \".accordion\" ).accordion();\r\n";
    to this:
    $default_accordion_init = "\r\n$( \".accordion\" ).accordion({autoHeight: false, navigation: true, collapsible: true });\r\n";
    in the file:
    jquery-ui-widgets/jquery-ui-widgets.php

    This file is accessed via the edit button for that plugin in the installed plugins list on your dashboard.

    These extra options also turn on "navigation" and "collapsible" functions. "Navigation" could be very useful by allowing anchor tags within a panel (or its heading) to be accessed from external links with the panel automatically opening.

    "Collapsible" allows panels to be closed without the next panel opening, that is you can close all the panels. I find this useful in that the panels then look more like a table of contents, and the reader can see what all the panels are. In my content, the reader might need to go directly to, say, the third panel.

    The first panel still opens on page load, which I would prefer didn't happen, but at least you can close it.

    Explanations here:
    http://jqueryui.com/demos/accordion/#no-auto-height
    and:
    http://jqueryui.com/demos/accordion/#collapsible

    Other options are available which I didn't play with.

    Nice plugin!

    Cheers,
    Mike Smith

  5. mikejcsmith
    Member
    Posted 1 year ago #

    This might also be useful to you.

    My template/CSS settings slightly broke the default appearance of this widget so I modified the CSS a bit, in order to get the vertical spacing and border appearance I wanted. I found the arrows were under the Headings, so I had to bump the headings over to the right with padding of 30px. I also needed to pad top by 4px and bottom by 2px in the headers as well. Finally I had an open margin between the header and its panel, which I closed up with a negative margin-top on the panel.

    I kept borders all around because I prefer this, but perhaps I'll make a dotted border between the header and its panel.

    The ".custom" selector is there because I use the WordPress Thesis Framework.

    Use the selector "div.accordion .ui-accordion-header" as is. Don't add the H2 H3 etc tags to it, because you want it to work regardless of which header tag you end up using to mark the accordion headings. On some pages I use H2, and on others I use H3.

    .custom div.accordion .ui-accordion-header {
    padding: 4px 0px 2px 30px;
    border: 1px solid #FFBC73;
    }

    .custom div.accordion div.ui-accordion-content {
    border: 1px solid #FFBC73;
    margin-top: -13px;
    margin-bottom: 13px;
    }

    Also, take care not to overlap with other range-based shortcodes from other plugins on your page. For example, I use conditional shortcodes from s2member to control what is displayed according to their login role. This could easily go wrong (i.e. break the page, display wrong content) if I overlapped those shortcodes with these accordion divs.

    Cheers,
    Mike

  6. David Gwyer
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for answering Mike.

    To reiterate. This Plugin simply exposes the jQuery UI library on the front end of your site. All you need to do is add the correct jQuery UI html on your posts and pages and it will work without errors if you use the right html element selector, and valid jQuery code etc.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic