jQuery functions only work on homepage

by

Replace this line:

<img src="https://wordpress.stackexchange.com/questions/285006/<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">

with the following, to fix the invalid / and dimensions.

<img src="https://wordpress.stackexchange.com/questions/285006/<?php header_image();?>" height="120" width="100" alt="" class="siteLogo" />

Replace this markup:

<span class="spanish">español</span> | <span class="english">english</span>

with the following:

<span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>

Change your JavaScript to the following:

jQuery.noConflict();

jQuery(document).ready(function($) {
  'use strict';

  // You can use the shorter `$` inside the function,
  // even in noConflict mode. `.ready()` passes `$` to you.

  var $toggles = $('.topBar .toggles > span');
  var $uls = $('.topBar nav > ul');

  $toggles.on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    var $this = $(this);

    $toggles.removeClass('active');
    $uls.removeClass('open').hide();

    $this.addClass('active');
    $($this.data('target')).addClass('open').show();
  });
});

Leave a Comment