Javascript Not Working in Child Theme

  • I am working on a child theme of Twenty Thirteen. I want to make a slide down about page (something like the one seen here), but I can’t get the javascript to work.

    I put this before the end of <head> in header.php:

    <script>
 $(document).ready(function(){
 $("toggle").click(function(){
  $("abouttoggle").slideToggle();
  });
 });
</script>

    And this in the body:

    <div id="abouttoggle">
 <div id="abouttoggle_inner">
   <h1>This is the About Page.</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
</div>

    But when I click the button, it doesn’t do anything. What am I doing wrong?

Viewing 15 replies - 16 through 30 (of 32 total)
  • Thread Starter mcography

    (@mcography)

    Yes.

    This is why I found enqueuing confusing the first time I tried it…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What about if you now add this (and only this) to the top:

    <?php

    Thread Starter mcography

    (@mcography)

    Okay, now I’m majorly confused. I didn’t change anything else, but the site no longer breaks when I upload functions.php. It works whether or not functions.php is empty or contains code.

    That being said, the javascript still doesn’t work.

    I am so confused on why this isn’t working.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So now you can enqueue the JavaScript through functions.php as you did before without the site breaking, can you do that?

    Thread Starter mcography

    (@mcography)

    This is all the code I have in functions.php:

    <?php
 function toggleAbout() {
 wp_enqueue_script( 'toggle-about', get_stylesheet_directory_uri() . '/js/toggle-about.js', '', true );
	}
 add_action( 'wp_enqueue_scripts', 'toggleAbout' );

 function favicon_link() {
 echo '<link rel="shortcut icon" type="image/x-icon" href="/../../img/ico/favicon.ico" />' . "\n";
}
 add_action( 'wp_head', 'favicon_link' );
?>

    And none of it is working. I put the favicon bit in there thinking that if it worked, maybe the problem was with my enqueue. But neither of the functions are working.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Instead of this:

    function toggleAbout() {

    Try this:

    function toggleAbout() { var_dump('test');exit;

    Does that do anything?

    Thread Starter mcography

    (@mcography)

    It breaks the site.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Instead of this:

    function toggleAbout() { var_dump('test');exit;

    Can you try this:

    function toggleAbout() { var_dump(get_stylesheet_directory_uri() . '/js/toggle-about.js');exit;

    Then post here what the output on your site is?

    Thread Starter mcography

    (@mcography)

    This is what I have in functions.php:

    <?php
function toggleAbout() { var_dump(get_stylesheet_directory_uri() . '/js/toggle-about.js');exit;
wp_enqueue_script( 'toggle-about', get_stylesheet_directory_uri() . '/js/toggle-about.js', '', true );
}
add_action( 'wp_enqueue_scripts', 'toggleAbout' );
?>

    And the site is broken. It just says: “string(71) “https://cubackpack.org/dev/wp-content/themes/knapsack/js/toggle-about.js&#8221;.”

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you now replace that:

    <?php
function toggleAbout() { var_dump(get_stylesheet_directory_uri() . '/js/toggle-about.js');exit;
wp_enqueue_script( 'toggle-about', get_stylesheet_directory_uri() . '/js/toggle-about.js', '', true );
}
add_action( 'wp_enqueue_scripts', 'toggleAbout' );
?>

    With this:

    <?php
function toggleAbout() {
wp_enqueue_script( 'toggle-about', get_stylesheet_directory_uri() . '/js/toggle-about.js', '', '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'toggleAbout' );
?>

    Thread Starter mcography

    (@mcography)

    The site is no longer broken, but the function still doesn’t work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Clear your browser’s cache, right click on your site and press ‘View source’ (or inspect element), then look for your script. It should be getting pulled in now. Near the bottom.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re still targeting an element called “<toggle>“:

    $("toggle").click(function(){

    Thread Starter mcography

    (@mcography)

    Sigh. I still don’t see it.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s not there anymore, but it was when I posted 5 mins ago.

    I’ve got to go – Letting everyone know I can’t respond for a while if anyone wants to jump in.

Viewing 15 replies - 16 through 30 (of 32 total)
  • The topic ‘Javascript Not Working in Child Theme’ is closed to new replies.