2

I am trying to implement the bootstrap accordion feature: http://getbootstrap.com/javascript/#collapse-example-accordion

So I upload the static resource and included in my VF tag

But when I render the page, the section do not expand or collapse. Any ideas? I have tested in Chrome, Safari and Fireforx.

  • right click on your chrome browser and click on inspect element. Paste the console errors ( you can see a red X arrow with some number). – Rao Apr 22 '15 at 21:32
  • You will need to make sure that standardStylesheets is false and that you have included both the bootstrap styles + bootstrap javascript for it to work. – Caspar Harmer Apr 22 '15 at 21:44
  • Could you add a cut down version of your page? (Just include the accordian part + the includescript stuff and any javascript initialisation code) – Caspar Harmer Apr 22 '15 at 22:37
  • Have you had any luck? – Caspar Harmer Apr 22 '15 at 22:54
2

For a start, ensure that standardStylesheets="false" is present in the page definition. Then, make sure you have something similar to this (you need both css and javascript for this sort of bootstrap component to work:

<apex:includeScript value="{!URLFOR($Resource.my_resource, 'my_resource/bootstrap/js/bootstrap.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.my_resource, 'my_resource/bootstrap/css/bootstrap.css')}"/>

I also had some trouble getting the bootstrap component to load automatically and called my own in the onload function, ie:

j$ = jQuery.noConflict();
j$('.collapse').collapse();

Finally, if it's still not working, do as the user @rao says - depending on what browser you are using, examine the console errors that appear.

1

As @rao suggested, I inspected the element with the Chrome Console. I was missing the jQuery. I added the following lines to the head and now it works:

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.