Accordian/collapsible style menu with menu page content displaying on click?

Do you have a menu that has children in at the moment? Which theme are you working with?

Hi Andrew, the menu I’m currently working with does not have any children. Also, I’m creating my own theme from scratch.

Before you can work with JavaScript you’ll need the HTML there on the page; you’ll need a basic menu with children in

The HTML is there and the menu is called using wp_nav_menu. I’m not sure what you mean by children, but the “menu items/pages” have been created via the admin.

Let’s see a page with the menu

The website I’m working on is my blog site (lapetitefrog.com), which I’m trying to move from Blogger to WordPress. You can see my WordPress work in progress of it on: https://madebynichole.com/

As you can see, there are only two menu items on the sidebar menu: “About” and “Contact”. Instead of being directed, on click, to an actual About page, I’d rather the content from the About page to display below the About menu item (accordian style).

^I know you can do this statically via javascript/jquery, but I want it to be dynamic so that the content that is displayed on click can be edited through the WordPress admin. Hope this makes more sense.

Instead of being directed, on click, to an actual About page, I’d rather the content from the About page to display below the About menu item (accordian style).

Oh right. You’d want to remove the menu completely, we’re not creating a menu any more. How familiar are you with PHP? Get the post content using conventional wp methods, output the title & content of that post and then use jQuery slideToggle.

So I tried out your method, but the jQuery slideToggle doesn’t seem to be working. I’ve included the code I’m using below. The #menu-item-206 is the unique ID to one of the menu items called, “About.” I tried to code it so that upon click of that menu item, the #aboutinfo would slide open and closed. Am I missing something?

HTML:
<div id=”switchmenu”><!–switchmenu begin–>
<span class=”switchitems”><?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?></span>
</div><!–switchmenu end–>
<div id=”aboutinfo”>
<?php
$the_query = new WP_Query( ‘page_id=177’ );
if ( $the_query->have_posts() ) {
while($the_query->have_posts()){
$the_query->the_post();
the_content();
}
}
wp_reset_postdata();
?>
</div>

jQuery:
(function( $){
$( “#menu-item-206” ).click(function() {
$( “#aboutinfo” ).slideToggle( “slow”, function() {
// Animation complete.
});
});
} )( jQuery );