Jquery UI accordion?

I’ve managed to make the Jquery UI accordion work on the front page of my WordPress website.

Problem is, instead of opening and closing the divs when I click on the headings, the effect happens when I click on random sections of the text, like clicking in the middle of a paragraph.

I’d like to make it so that if I click on a header (h2 or h3, etc.) it opens the section beneath the header. Right now, it seems to work when I click in the middle of paragraph, or sometimes it works when I click on a header but then it doesn’t work when I click on the header the next time… I’m totally confused.

I always thought that it automatically worked with headers (similar to the accordion plug-in I have on another site). I can’t find any info online that clears this up for me.

Here’s my accordion script:

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

The PHP code below shows the div I want the accordion to act on. You see, I’m pulling content into my front page from another page in WordPress. Note the “accordion” div in there…

            <section id="faq">
            <div class="indent">
                    <?php 
        $query = new WP_Query( 'pagename=faq' );
        // The Loop
        if ( $query->have_posts() ) {
            while ( $query->have_posts() ) {
                $query->the_post();
                echo '<div class="entry-content">';
                echo '<div id="accordion">'; //This the div that should be affected...
                the_content();
                echo '</div>';
                echo '</div>';
            }
        }

        /* Restore original Post Data */
        wp_reset_postdata();
        ?>
            </div>
        </section>

Could the problem have something to do with fact that I’m pulling in content from another page?

BTW, I also have a couple of other scripts running in the same JS file as the accordion script, but I commented those out and the problem remained.

Here’s how the whole JS file looks, just in case you’d like to see:

    jQuery(document).ready(function($) {  

/* Stick navigation to the top of the page */
var stickyNavTop = $('.main-navigation').offset().top; 

$(window).scroll(function(){  
    var scrollTop = $(window).scrollTop();  

    if (scrollTop > stickyNavTop) {   
        $('.main-navigation').addClass('sticky-header'); 
        $('.site-header').addClass('shifted');
    } else {  
        $('.main-navigation').removeClass('sticky-header');   
        $('.site-header').removeClass('shifted');
    }  

});

        /* Scroll to specific section on front page */
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: (target.offset().top - 50)
            }, 1000);
            return false;
        }
    }
});
});


    /* Accordion effect */
  $(function() {
$( "#accordion" ).accordion({
});
  });


}); /* Ends the jquery declaration */