Link to home
Start Free TrialLog in
Avatar of Alicia St Rose
Alicia St RoseFlag for United States of America

asked on

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
Avatar of Jeffrey Dake
Jeffrey Dake
Flag of United States of America image

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?
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
Avatar of Alicia St Rose

ASKER

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.
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.
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
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.
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.
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:

User generated image
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).
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?
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
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You are a God.

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

Until next time!
You are welcome.