badget

Biggest Sale! Special Offer!

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

Hurry up! *Limited time offer*

The JavaScript for Accordion does not work

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #44602

    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!

    #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!

    #44631

    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!

    #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

    #44760

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.