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.

Improve this question
4
  • 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, 2015 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, 2015 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, 2015 at 22:37
  • Have you had any luck?
    – Caspar Harmer
    Apr 22, 2015 at 22:54

2 Answers 2

Reset to default
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.

Improve this answer
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"/>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .