Tagged: Accordion, JavaScript
- This topic has 5 replies, 2 voices, and was last updated 8 years, 6 months ago by Theme Horse Support Team.
-
AuthorPosts
-
April 29, 2016 at 6:37 pm #44568ilayxzParticipant
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
LeyyinMay 2, 2016 at 10:08 am #44602Theme Horse Support TeamKeymasterHi 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 #44622ilayxzParticipantThank 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:
- 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>
- 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"); }); });
- 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 #44631Theme Horse Support TeamKeymasterHi 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 #44711ilayxzParticipantI 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 #44760Theme Horse Support TeamKeymasterHi 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 codeadd_action( ‘wp_enqueue_scripts’, ‘interface_enqueue_accordion’ );
function interface_enqueue_accordion() { wp_enqueue_style( 'interface', get_template_directory_uri() . '/js/accordion.js' ); }
Thank you!
- In interface-child/header.php in <head>-area the following code inserted:
-
AuthorPosts
- You must be logged in to reply to this topic.