0

I am not great with Javascript and I am currently trying to add an accordion function to a div so I can reveal additional details. This is my current mobile website, http://txf4199.cias.rit.edu/mobile-test-4/index.html#work

The issue: I can click on "View More" and the accordion effect would work fine as it reveals content. However, if I use the filter on top of the site ("Mobile", "Motion", etc.), the accordion effect won't work anymore.

FYI: The filter is using quicksand.js (a filtering plugin) & also main.js (a custom script), but the accordion effect is simply using an inline script since it's so small.

Here is a list of my js files: 

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('.accordionButton').click(function() {
            $(this).next().slideToggle();
        });
    });
</script>

I've already looked up document ready functions, thought that more than one would be the issue but it's acceptable so I don't know where else to look. Any help would be appreciated, I'll be watching this post like a hawk, thank you in advance!

sydas
  • 3
  • 1
  • 4

1 Answers1

0

Try removing your reference to jquery 1.5. You are including both jquery 1.7.1 and jquery 1.5. I would imagine this could cause some issues. Also try using the default collapsible behavior baked into jqm. Read more here http://jquerymobile.com/demos/1.1.0-rc.2/docs/content/content-collapsible.html

Update:

Oh and also don't use document ready. Instead bind to the pageinit event.

$(document).on('pageinit','[data-role=page]',function(){
    put code that you want for every page here.
});
codaniel
  • 5,263
  • 1
  • 23
  • 32
  • Can't, quicksand.js relies on the google ajax jquery, and jquery mobile relies on the 1.7.1 & to add to that, I would do the default collapsible behavior, the only thing is that it doesn't animate, unless that's possible? that's basically the main reason why I'm doing this – sydas Apr 10 '12 at 02:54
  • Look for an alternate plugin that works jquery 1.7.1. Or just animate them your self with jquery. Anyways try my suggestion of binding to pageinit. It may help with some of the issues. – codaniel Apr 10 '12 at 03:05
  • Already tried the pageinit, no success. All the pages are built in one html, not multiple pages. I tried this: $(document).on('pageinit','[data-role=page]',(function() { $('.accordionButton').click(function() { $(this).next().slideToggle(); }); }); Hope I did it right... As for the plugin, there's no recent update. Oh one more thing, you mentioned that I could animate myself w jquery, could you give me an example of how that could work? I'm just looking for a simple slide up/down effect – sydas Apr 10 '12 at 03:20
  • they don't work too well :(, the animate doesn't even work at all. – sydas Apr 10 '12 at 05:14