WordPress.org

Forums

jQuery UI Widgets
where do I put the option code? (6 posts)

  1. crj123082
    Member
    Posted 2 years ago #

    Hello,

    I would like to change my accordion instances so they are collapsible...where do I need to change code to do this?

    I've tried adding the following to my theme, in header.php and index.php:

    <script>
    	$(function() {
    		$( ".selector" ).accordion({ active: false });
    		$( ".selector" ).accordion({ collapsible: true });
    		$( ".selector" ).accordion({ autoHeight: false });
    	});
    </script>

    but it doesn't seem to be working.

    Thanks!

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

  2. David Gwyer
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    Try this. Just tested it on my local install and works fine. Make sure the '.selector' is correct, i.e. your opening accordion div tag is <div class="selector">

    $( ".selector" ).accordion({
    			collapsible: true
    });

    Add the code in the Plugin settings page in the accordion text box.

  3. crj123082
    Member
    Posted 2 years ago #

    Thanks so much for the help, I got it working!

    One other thing I've noticed, though, is that even if I don't set autoHeight to false (and even if I explicitly set it to true), it does not seem to be adjusting the height accordingly...some sections have a scroll bar, while others have a lot of whitespace. Do you know if there's any way to fix this?

  4. David Gwyer
    Member
    Plugin Author

    Posted 2 years ago #

    I can't think of any reason why the autoheight is doing that. One thing I have learnt about using jQuery UI widgets is that the JS code is easier to get right than the CSS!

    By the way I am working on an updated version to this Plugin which is basically a complete rewrite. It will be much easier to add jQuery code and, will include support for ALL jQuery UI features shipped with WordPress, not just a select few. :)

  5. webreid
    Member
    Posted 2 years ago #

    Hello,

    It seems as though I have it right, but it's not working.

    Any suggestions please?

    [easyrotator]erc_6_1349983050[/easyrotator]

    
    

     

    <div class="selector">

    <div id="accordion-1">
    <p>This is tab one.</p>
    </div>
    <div id="accordion-2">
    <p>This is tab two.</p>
    </div>
    <div id="accordion-3">
    <p>This is tab one.</p>
    </div>
    </div>

    I'm using the collapsible above to crj123082

    It's at http://webreid.com/allodium

    Thank you.

  6. David Gwyer
    Member
    Plugin Author

    Posted 2 years ago #

    Just add valid accordion code and make sure the correct selector is set in Plugin options.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery UI Widgets
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.