simple accordion feature

Hum ... give a try with "shortcodes ultimate" for example ... :)

Yup lots of plugins options out there. Here are a few:
https://en-ca.wordpress.org/plugins/shortcodes-ultimate/
https://en-ca.wordpress.org/plugins/accordion-shortcodes/
https://en-ca.wordpress.org/plugins/accordions/

Thanks. I am aware of the plugins, but this seems like a relatively simple thing that can be done using html/css/javascript. Should I be putting the javascript in another space?

Thanks again

Try adding it using one of these methods: https://docs.generatepress.com/article/adding-php/

Let me know.

Javascript can be put in wp_footer if it's wrapped in <script></script> tags.

Thanks, Tom. That's what I thought. I put the javascript code provided here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol directly into the wp_footer section in GP Hooks. It sort of works... The plus changes to minus, but the text doesn't drop down. Very weird.

Without seeing your site is hard for us to tell what's going on.

Make sure everything is added from that page you linked. The demo they show is running off the code on the left side so if you add the exact same code the result should be the same.

The page is http://bidmcfirst.com/test/. I've added the following code in the wp_footer section under GP hooks:

<?php if ( is_page( 'test' ) ) : ?>
<script>
        var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
  	  panel.style.maxHeight = null;
    } else {
  	  panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>
<?php endif; ?>

I'm getting the following error:

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.acc.(anonymous function).onclick

It says that page isn't found.

Sorry about that. I had set it to private accidentally. Should be all set now.

Hmm, not sure that JS is the best method.

Try this: http://uniondesign.ca/simple-accordion-without-jquery-ui/

I tried the code you, Tom, referred to in your reply on February 22, 2017, but the actual accordion effect is missing. In the following, I document what I did, i.e., copied and pasted. Please tell me where I made a mistake. In step 3, I give the link to the resulting page.

As an alternative, I tried the code from http://www.w3schools.com/howto/howto_js_accordion.asp, which did not work either.

Thanks for your assistance.

(1) Inserted the following in "GP Hooks > wp_footer"

<script type="text/javascript">
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function(){

//Expand or collapse this panel
$(this).next().slideToggle('fast');

//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');

});
});
</script>

(2) Inserted the following in "Customizer > Custom/Additional CSS"

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

(3) Inserted the following on the page http://www.schulte-martini.de/accordiontest1/

Your JS should look like this to work with WP:

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#accordion').find('.accordion-toggle').click(function(){

			//Expand or collapse this panel
			$(this).next().slideToggle('fast');

			//Hide the other panels
			$(".accordion-content").not($(this).next()).slideUp('fast');

		});
	});
</script>

Thank you for your quick assistance, Tom.

Now it is running; but only after I excluded jquery.js from being deferred by Async Javascript, a plugin you recommend for optimization. Perhaps you should update your recommended settings of that plugin.