Jquery question (if you don't know what that is, then ignore this post).

I know we have a few smart girls out there... Despite my attempts to bimbofy all of you, perhaps you can be of assistance.

I'm creating a profile block and using a bootstrap widget to do so. In order to get it to play friendly with drupal I have to include the following line of code:

drupal_add_js('jQuery(document).ready(function(){jQuery("#accordion").accordion({collapsible: true, autoHeight: false, icons: {"header": "ui-icon-plus", "headerSelected": "ui-icon-minus"} });});', 'inline');

In doing so, it causes that first panel of the accordion to offset and become selectable. We want that panel to stay permanently open and not be a functioning part of the accordion. Any ideas? This is stalling me out tremendously...

Share this post

Emma Peel's picture

If you don't find an answer over the weekend I'll ask the developers at work on Monday, they work with this sort of thing on a daily basis.

Nobody can force feminise me! I'm a volunteer

melissa's picture

Wonderful! I'll keep updating this thread as work continues...

Have you done your affirmation today, pretty girl?

subsophie's picture

So you want the first block always open, but the rest should work like a regular accordion?

I think the easiest thing to do would be to keep the content that should always be visible outside the #accordion div. The hardest part would be reproducing the right styles on the permanent piece that isn't really in the accordion. I think I have something put together on JSfiddle that looks somthing like what I mean. Take a look: https://jsfiddle.net/5pkLennv/

Sorry not to have it set up for Drupal specifically.



SKatie's picture

I asked some coding friends of mine on facebook. Here is the responses...

Add a space and an asterisk after the #accordion? Within the quotes, obviously.
Though that might fuck it further.
Maybe a setting of the accordion that can be toggled, instead... check the docs on the accordion widget.

IIRC that should apply the accordion to the second #accordion element.

There'd need to be a few more changes to get subsequent entries.

I'm not positive on this though.
Erhm could also try this:

$('#accordion').each( function () {
var collapse = $(this);
if ($(this).eq(0){
$(this).accordion({collapsible: false; autoHeight: true; icons:
{"header": "ui-icon-plus", "headerSelected": "ui-icon-minus"}});
} else {
$(this).accordion({collapsible: true; autoHeight: false; icons:
{"header": "ui-icon-plus", "headerSelected": "ui-icon-minus"}});

I think I missed a couple vital bits there, but it should, *should*, turn the first element into a non-collapsible entry and all others will be made collapsible.

I hope some of that helps. :)

Sissy, Secretary, Slut... So many S'ehs so little time...

melissa's picture

Problem solved. Thank you Katie... between that and some brain power from Sophie... I got to where i needed to be!

Have you done your affirmation today, pretty girl?