Supporting each other

Community forums

Welcome, Guest

The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Page:
1

TOPIC:

jQuery Accordion 7 years 9 months ago #4290

Neil Pollock
Topic Author
Offline
Premium Member
Posts: 92
Thank you received: 4

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 Inloggen or Create an account to join the conversation.

jQuery Accordion 7 years 9 months ago #4291

tom Offline Administrator Posts: 1286 Thank you received: 324	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 Inloggen or Create an account to join the conversation.

jQuery Accordion 7 years 9 months ago #4335

Fay Offline Elite Member Posts: 229 Thank you received: 92	I've just added new 'panel height' optional properties to the accordion & tabbed navigator pages that will control this
	Please Inloggen or Create an account to join the conversation.