[Resolved] simple accordion feature

[FIRST]

I know there are a few plugins to create the accordion feature on pages, however I guess I’d like to avoid using another plugin if possible. I’m trying to recreate the following on one of my pages: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

I’ve put the main text in the ‘text’ area, I put the css portion in the ‘simple css’ section and I put the javascript in the GP hooks section under wp_footer (and checked enable PHP). Unfortunately, it’s still not working. Am I missing something very simple?

Thanks!

[jmarc]

Hum … give a try with “shortcodes ultimate” for example … 🙂

[Leo]

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/

[FIRST]

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

[Leo]

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

Let me know.

[Tom]

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

[FIRST]

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.

[Leo]

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.

[FIRST]

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

[Tom]

It says that page isn’t found.

[FIRST]

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

[Tom]

Hmm, not sure that JS is the best method.

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

[ssmatgp]

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/

<h4 class=”accordion-toggle”>Accordion 1</h4>

<p>Cras malesuada ultrices augue molestie risus.</p>

<h4 class=”accordion-toggle”>Accordion 2</h4>

<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>

<h4 class=”accordion-toggle”>Accordion 3</h4>

<p>Vivamus facilisisnibh scelerisque laoreet.</p>

[Tom]

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>

[ssmatgp]

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.

[Author]

Posts