The JavaScript for Accordion does not work

Tagged: Accordion, JavaScript

This topic has 5 replies, 2 voices, and was last updated 7 years, 12 months ago by Theme Horse Support Team.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 29, 2016 at 6:37 pm #44568
ilayxz
Participant
I would like to insert to my Website an accordion.

But the javascript does not work.

What did I do?

– A new Site was created (Standardtemplate, No sidebar).

– In WordPress-Texteditor on the new Site was the following code inserted:
```
<dl>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
  <dt>Hier steht die Überschrift <a href="#" class="closed">Details</a></dt>
  <dd>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</dd>
</dl>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
 $("dt").click(function(){
  $('dd').slideUp("fast");
  $('dt > a').removeClass('open').addClass("closed");
  $(this).next("dd").slideDown("fast");
 $(this).children("a").removeClass('closed').addClass("open");
 });
});
```
The Result:
It looks good but the accordion does not work.

If I execute the code as extern html-site, it works. But not in WordPress for interface-theme.
Is there any way to solve this problem?

Thank you beforehand.

Best regards
Leyyin
May 2, 2016 at 10:08 am #44602

Theme Horse Support Team
Keymaster

Hi ilayxz,

You need to add the javascript code at header section not at the text editor. You need to hire a developer and it needs code customization. You need to customize the code at header.php file or better enqueue from functions.php to head section. So that your accordion works properly. Above is not a good practice having accordion in page.

Thank you!

May 2, 2016 at 7:58 pm #44622
ilayxz
Participant
Thank you very much for your recommendation! It has very helped! 🙂

First I did my script code at interface-child/header.php inserted. So It works marvellous!

But than I was going to enqueue it from functions.php to head section.

Thereto I made the following steps:
1. In interface-child/header.php in <head>-area the following code inserted:
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
2. A new javaScript created: accordion.js in file interface-child/js:
```
$(document).ready(function(){
                $("dt").click(function(){
                    $('dd').slideUp("fast");
                    $('dt > a').removeClass('open').addClass("closed");
                    $(this).next("dd").slideDown("fast");
                    $(this).children("a").removeClass('closed').addClass("open");
                });
            });
```
3. To Loading the scripts properly in WordPress, I did pasted the following code in my child-theme’s functions.php file:
```
function wp_interface_scripts() {
                wp_register_script('my_accordion_script', plugins_url('accordion.js', get_stylesheet_directory() . 'js/accordion.js'), array('jquery'),'1.0.0', false);
                wp_enqueue_script('my_accordion_script');
            }
            add_action( 'wp_enqueue_scripts', 'wp_interface_scripts' );
```
Unfortunately it doesn’t work. Where do I make mistake?

Thank you very much again!
May 3, 2016 at 9:49 am #44631
Theme Horse Support Team
Keymaster
Hi ilayxz,

I think you have enqueued it to plugins. Did you created a child theme or plugins?
```
add_action( 'wp_enqueue_scripts', 'interface_enqueue_accordion' );
function interface_enqueue_accordion() {
    wp_enqueue_style( 'interface', get_template_directory_uri() . '/accordion.js' );

}
```
This will point to the link http://yourdomain.com/accordion.js Make sure your domain link is working correctly. Also provide you link too if you have an issues on it.

Thank you!
May 5, 2016 at 7:40 pm #44711
ilayxz
Participant
I created a child theme and accordion.js is a javascript, which is in folder interface-child\js located.
So; interface-child/js/accordion.js.

Am I to use the following code at interface-child/functions.php to Loading the javaScript: (?)
```
add_action( 'wp_enqueue_scripts', 'interface_enqueue_accordion' );
function interface_enqueue_accordion() {
    wp_enqueue_style( 'interface', get_template_directory_uri() . '/accordion.js' );

}
```
I think, it said to be ‘js/accordion.js’ instead of ‘/acoordion.js’. But it doesn’t work in both case.

Thank you
May 9, 2016 at 10:04 am #44760
Theme Horse Support Team
Keymaster
Hi ilayxz,

Can you once provide you Site Url or you can view source page and see where your accordion.js is loaded. Once use this code

add_action( ‘wp_enqueue_scripts’, ‘interface_enqueue_accordion’ );
```
function interface_enqueue_accordion() {
    wp_enqueue_style( 'interface', get_template_directory_uri() . '/js/accordion.js' );

}
```
Thank you!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Theme Horse

The JavaScript for Accordion does not work