My toggle won't toggle

I've got a jQuery toggle on this page:

http://sandbox.intrepidrealist.com/cazoozsb/test-page/

I'm not sure what's causing it to be dead in the water. It works in the example:

https://codepen.io/derekjp/pen/pPqwXJ
LVL 8
Alicia St RoseOwner & Principle Developer/DesignerAsked:
Who is Participating?
 
Julian HansenCommented:
The cause of the problem is this line

jQuery(".tab-slider--nav li").click(function() {

Open in new window


Let's break this down.

When a page loads the browser interprets the HTML as it gets it. When it sees JavaScript - it executes it. Because you have placed this code inside the head AND outside of a document ready block that codes is going to do this

Find me all <li> elements that are children of elements with class .tab-slider--nav.

Well, we are still in the <head> so there is no HTML content yet so the result of this line is going to be zip. The code is going to do absolutely nothing.

To solve this you can locate the code later in your code (after the element is created) but that is still not really good practice.

What you should be doing is including the code in a document ready block.

You already have a document ready  - you can add to that OR you can create a new Document Ready block - it is up to you and the design of your page.

Going with what you have - this should solve your problem

jQuery(function(){
	jQuery(".tab-slider--body").hide();
	jQuery(".tab-slider--body:first").show();
	
	jQuery(".tab-slider--nav li").click(function() {
		jQuery(".tab-slider--body").hide();
		var activeTab = jQuery(this).attr("rel");
		jQuery("#"+activeTab).fadeIn();
		if(jQuery(this).attr("rel") == "tab2"){
			jQuery('.tab-slider--tabs').addClass('slide');
		}else{
			jQuery('.tab-slider--tabs').removeClass('slide');
		}
		jQuery(".tab-slider--nav li").removeClass("active");
		jQuery(this).addClass("active");
	});
});

Open in new window

Note I have used the short hand version of a document ready block jQuery(function() {
As you have it is fine - just a bit more verbose than is necessary
1
 
Jeffrey Dake Senior Director of TechnologyCommented:
Looking at your html page I see the javascript for

<script>
jQuery("document").ready(function(){
  jQuery(".tab-slider--body").hide();
  jQuery(".tab-slider--body:first").show();
});
</script>

Open in new window


but the example in the codepen has a whole block about

$(".tab-slider--nav li").click(function() {
  $(".tab-slider--body").hide();
  var activeTab = $(this).attr("rel");
  $("#"+activeTab).fadeIn();
	if($(this).attr("rel") == "tab2"){
		$('.tab-slider--tabs').addClass('slide');
	}else{
		$('.tab-slider--tabs').removeClass('slide');
	}
  $(".tab-slider--nav li").removeClass("active");
  $(this).addClass("active");
});

Open in new window


Is that on your page and I am missing it, or is that your problem?
1
 
RobOwner (Aidellio)Commented:
You have quite a few errors:

jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
(index):48 GET http://sandbox.intrepidrealist.com/cazoozsb/js/index.js?ver=4.9.1 net::ERR_ABORTED
(index):1 [DOM] Found 3 elements with non-unique id #_form_args: (More info: https://goo.gl/9p2vKq) <input type=​"hidden" class=​"pum-field  pum-field-_form_args  pum-field-hidden  " id=​"_form_args" name=​"_form_args" value=​"{"enable_autologin":​"1","disable_redirect":​false,"redirect":​"http:​/​/​sandbox.intrepidrealist.com/​cazoozsb/​getting-started"}​">​ <input type=​"hidden" class=​"pum-field  pum-field-_form_args  pum-field-hidden  " id=​"_form_args" name=​"_form_args" value=​"{"disable_redirect":​false,"redirect":​"http:​/​/​sandbox.intrepidrealist.com/​cazoozsb/​test-page/​"}​">​ <input type=​"hidden" class=​"pum-field  pum-field-_form_args  pum-field-hidden  " id=​"_form_args" name=​"_form_args" value=​"{"disable_redirect":​false,"redirect":​"http:​/​/​sandbox.intrepidrealist.com/​cazoozsb/​member-dashboard/​"}​">​
(index):1 [DOM] Found 3 elements with non-unique id #user_login: (More info: https://goo.gl/9p2vKq) <input type=​"text" placeholder=​"Username" class=​"regular-text" id=​"user_login" name=​"user_login" value required>​ <input type=​"text" placeholder=​"Username or Email" class=​"regular-text" id=​"user_login" name=​"user_login" value required>​ <input type=​"text" placeholder=​"Username" class=​"regular-text" id=​"user_login" name=​"log" value required>​
(index):1 [DOM] Found 2 elements with non-unique id #user_pass: (More info: https://goo.gl/9p2vKq) <input type=​"password" placeholder=​"Password" class=​"regular-text" id=​"user_pass" name=​"user_pass" value required>​ <input type=​"password" placeholder=​"Password" class=​"regular-text" id=​"user_pass" name=​"pwd" value required>​
(index):1 [DOM] Found 3 elements with non-unique id #wp-submit: (More info: https://goo.gl/9p2vKq) <button type=​"submit" class=​"pum-button-regular" id=​"wp-submit" name=​"wp-submit">​Register​</button>​ <button type=​"submit" class=​"pum-button-regular" id=​"wp-submit" name=​"wp-submit">​Get New Password​</button>​ <button type=​"submit" class=​"pum-button-regular" id=​"wp-submit" name=​"wp-submit">​Log In​</button>​
favicon.ico:1 GET http://sandbox.intrepidrealist.com/favicon.ico 500 (Internal Server Error)

Open in new window


Those errors are related to non unique IDs on elements.  Every ID you use on an HTML element needs to be unique
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
I added that other part in an external file called index.js.
It was one of my attempts at trying to figure this out. Whether I have that portion in the head of the document or not it still didn't work. There was also a place online where I can download the files and  I did that in that instance too.
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Yeah, I saw those errors too. I'll have to do some digging around in a couple of plug-ins that I'm using that seem to be sharing the same IDs.
0
 
RobOwner (Aidellio)Commented:
Also your js file isn't loading: "http://sandbox.intrepidrealist.com/cazoozsb/js/index.js?ver=4.9.1" gives me a 404 Not Found error
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
I get a 404 when I try to open http://sandbox.intrepidrealist.com/cazoozsb/js/index.js that could be why the javascript is not binding correctly.
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
You could also try putting the block of javascript just below the html you have placed.  When binding a click event if the element does not already exist on the page it could be skipping it.  You could also add that block you have into the document.ready to see if that works, to guarantee your html was already rendered on the page.
0
 
Lucas BishopClick TrackerCommented:
In regards to Rob & Jeff's comments above. An easy way to see these errors they are reporting to you is by using the developer console in Chrome:

Chrome Developer Console
The "Console" and "Network" sections will quickly show you where errors are occurring.

(Just a heads-up in case you weren't aware, since those errors would be the first things I'd check).
1
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Okay,

I've gotten rid of the external file and added all of the code to the head. Just to get things back to one place.

So, Jeffrey, you're saying I should add this block of code underneath the .member-lessons container?
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
Yes, since the html element does not exist on the page yet. Or like I was saying you could also put that entire blog ck within the document.ready block you already had, which will make that JavaScript not fire until the complete Dom is loaded
0
 
Julian HansenCommented:
I would also make a slight change - add the following line as the fist line in the .click() handler
if (jQuery(this).hasClass('active')) return;

Open in new window

This just stops the tab from flashing if you click on the already selected item
Full listing
jQuery(function(){
	jQuery(".tab-slider--body").hide();
	jQuery(".tab-slider--body:first").show();
	
	jQuery(".tab-slider--nav li").click(function() {
    if (jQuery(this).hasClass('active')) return;
		jQuery(".tab-slider--body").hide();
		var activeTab = jQuery(this).attr("rel");
		jQuery("#"+activeTab).fadeIn();
		if(jQuery(this).attr("rel") == "tab2"){
			jQuery('.tab-slider--tabs').addClass('slide');
		}else{
			jQuery('.tab-slider--tabs').removeClass('slide');
		}
		jQuery(".tab-slider--nav li").removeClass("active");
		jQuery(this).addClass("active");
	});
});

Open in new window

0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
You are a God.

Thank you for the breakdown, too. I LOVE answers that teach.

Until next time!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.