Jquery UI accordion? - php

Question

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 */

Answer 1

Your code is printing several #accordion divs, when it should be only one wrapping all the accordion items. It should be like:
if ( $query->have_posts() ) {
echo '<div id="accordion">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<h3>'.get_the_title().'</h3>';
echo '<div class="entry-content">';
the_content();
echo '</div>';
}
echo '</div>';
}
That way you will have a code similar to the presented in the docs: one #accordion wrapping the items, the <h3> as titles and the <div> as the contents.

Answer 2

I solved the problem by wrapping the entire body of the page in the "accordion" div (leaving out just the header and the footer), and then making the script work on just H6 headers.
Thanks!