Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC: jQuery Accordion

jQuery Accordion 3 years 9 months ago #4290

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 77
  • Thank you received: 3
In the XOT template you have the Accordion Navigator page type, which I believe uses the jQuery accordion widget . There are various jQuery options that can be set when it comes to styling, but for some reason I can't get heightStyle to work.

Essentially, I want the height of each accordion panel to fit the size of the content, rather than filling the whole page. So, this should work:
$(function() {
	$(".ui-accordion" ).accordion({
		heightStyle: "content"
    });
});

Unfortunately, it doesn't.

Here is a link so you can see what I mean: xerte.cardiff.ac.uk/play_5135

Page 1 - An accordion I declared myself which works as required
Page 7 - The default settings on Accordion Navigator page
Page 8 - A failed attempt to apply my preferred style to the Accordion Navigator page

Ideally, I would like the accordion on Page 8 to function like the accordion on Page 1 (this is preferable for users who won't want to add an accordion via HTML and would be better adding it through the Xerte interface).

Any ideas?

Please Log in or Create an account to join the conversation.

jQuery Accordion 3 years 9 months ago #4291

  • tom
  • tom's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 999
  • Thank you received: 211
The height of the content is also hardcoded so you need to overrule that as well:

This worked for me:
$(function() {
	$(".ui-accordion" ).accordion({
		heightStyle: "content"
    });
    $(".ui-accordion-content" ).css('height', 'auto');
});
The following user(s) said Thank You: Neil Pollock

Please Log in or Create an account to join the conversation.

jQuery Accordion 3 years 9 months ago #4335

  • Fay
  • Fay's Avatar
  • Offline
  • Gold Boarder
  • Gold Boarder
  • Posts: 177
  • Thank you received: 60
I've just added new 'panel height' optional properties to the accordion & tabbed navigator pages that will control this

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: jjs
Time to create page: 0.042 seconds
Copyright © 2020 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search