ansaurus

Question

Answer 1

A:

Try changing your initial call to:

$("#gallery_accordion").accordion({ header: "h3", event : false });

And your HTML to:

<div id="gallery_accordion">
<div>
    <h3><a href="javascript:getGallery('369');">My first gallery</a></h3>
    <div id="gallery369">
    </div>
</div>
<div>
    <h3><a href="javascript:getGallery('381');">The second gallery</a></h3>
    <div id="gallery381">
    </div>
</div>
</div>

Each of your cells needs to have its own div tag and in the initial call you have now set the header to the H3 tag.

Hope this helps.

Here is a sample doc that loads the accordion:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                // Accordion
                $("#gallery_accordion").accordion({ header: "h3"});
                $("#gallery_accordion a").click(function(evt) {
          var galleryId = $(this).attr('href').split('#')[1];
          var contentDiv = $('#' + 'gallery' + galleryId);
          if(contentDiv.html() == "&nbsp;") {
            var galleryContent = getGallery(galleryId);
            contentDiv.html(galleryContent);
          }
        });
                var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1];
        var contentDivI = $('#' + 'gallery' + galleryId);
                var galleryContentI = getGallery(galleryId);
                contentDivI.html(galleryContentI);
            });
        </script>
    </head>
    <body>
    <!-- Accordion -->
        <h2 class="demoHeaders">Accordion</h2>
        <div id="gallery_accordion">
            <div>
                <h3><a href="#369">Gallery 1</a></h3>
                <div id="gallery369">&nbsp;</div>
            </div>
            <div>
                <h3><a href="#381">Gallery 2</a></h3>
                <div id="gallery381">&nbsp;</div>
            </div>
            <div>
                <h3><a href="#392">Gallery 3</a></h3>
                <div id="gallery392">&nbsp;</div>
            </div>
        </div>
</body>
</html>

Paul 2010-04-30 00:03:04

I added the divs and added the 'header: "h3"' to the init but unfortunately it did not help.

2010-04-30 04:25:45

Just have to ask, you have JQuery and JQuery UI js files referenced in your doc along with a JQuery UI css file, right?

Paul 2010-04-30 06:35:10

Added working code above, should help.

Paul 2010-04-30 06:47:42

Here is your example: http://beta.tin.info/css/nd/acctest.htmUnfortunately, I can not get it running properly.

2010-04-30 14:22:51

If you are wondering why the cells will not change when you click the header, you need to remove the event : false from the initial call. This will make the accordion function on click. What exactly is the problem you are having?

Paul 2010-04-30 17:36:37

When I remove the event: false then there is no content loaded. There is no call to fetch the div content. The click function is not called.

2010-04-30 18:04:33

I have updated the code sample above, copy and paste it into the beta.tin.info/css/nd/acctest.htm page and see if it works for you. If it does, just change the call to load text to load your galleries.

Paul 2010-04-30 18:20:18

This one works. How do I plug in ajax content though?

2010-04-30 18:29:46

Thanks, it works now even from ajax. The issue is resizing that I had at the beginning. The accordion refuses to re-size. Bad boy :-)

2010-04-30 18:41:11

I have changed the sample to work with the AJAX calls (I think) it is hard to know if it will work because I have not seen the code your are using to call the gallery. I am sure you can tweak it to make it work.

Paul 2010-04-30 18:56:31

The previous example worked fine. You can see in the link I provided.The resizing is an issue and it seems I'll have to re-size the parent from the loaded content.

2010-04-30 19:35:01

ansaurus

tags:

views:

answers:

Ajax jquery-ui accordion.

related questions