By allwires on

This is proving to be much more difficult than I anticipated. I have a page on my site that is "About Me". I want to display the information in a JQuery accordion.

After much much searching, I learned that in Drupal 6 you can just make a file script.js in your theme folder, and that will be automatically included... hooray for Drupal documentation.../sarcasm

Anyways, so after I figured that out, I made the file and put this inside

$("#accordion").accordion();

I structured my content just like on the JQuery UI sample code. The accordion doesn't work. So I tried editing my .info file and adding the JQuery UI core and JQuery UI accordion js files. It still didn't work. So I installed a JQuery UI 1.6 module, my accordion still doesn't work.

Does anyone have some ideas on what is going on or what I need to finally get this going?

Comments

Vahalaman’s picture

Vahalaman commented

subscribe

Vahalaman’s picture

Vahalaman commented

If you have the Devel Module enabled - disable it. I was having this same issue and solved it by doing this. The Devel module adds html that interferes with the way that your accordion div needs to be read.

Also, you may know this, but make sure your function is inside script tags:

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion();
    });
</script>
rpmskret’s picture

rpmskret commented

I am so glad you both posted. Happy coincidence I too am trying to use jquery ui and accordion specifically, with drupal for the first time. I got the required .js and .css attached to one desired page but it was no go so I found your post. A quick script add and now it works great.

My only problem was foolishly not adding the one line script that Vahalaman shows.

If your code is in it's own file you do not add the <script> tags. Use <script> tags only if adding the script somewhere on page rather than getting them linked. I have gotten them to link. Here is the proof taken from the header on the webpage:

<script src="/drupal/sites/all/themes/gordon/_js/rs-gordon.js?n" type="text/javascript"/>
<script src="/drupal/sites/all/themes/gordon/_js/ui.accordion.min.js?n" type="text/javascript"/>
<script src="/drupal/sites/all/themes/gordon/_js/ui.core.min.js?n" type="text/javascript"/>

The "?n" at the end of each src is either produced by drupal or firebug and should be ignored. File rs-gordon.js holds my custom code, same as per Vahalaman but uses the jquery long form.

$(document).ready(function(){
$("#accordion").accordion();
});

The only other change or addition I made to the drupal 6.11 javascript files was that I ventured to delete misc/includes/jquery.js which was vers. 1.2.6 and replaced it with a minified 1.3.2 vers. This version is far better for testing using firebug as for instance $('div'); will return a whole list of div's where the old vers. gives just a link to the DOM tab.

For the .css only jquery-ui.css was required. My header for the page with accordion includes this:

<link href="/drupal/sites/all/themes/gordon/_css/jquery-ui.css?n" media="all" rel="stylesheet" type="text/css"/>

I added some a php code in temple.php to get the .css and the .js attached to a specific page only. If you need more help let me know. Thanks for your posts.