Forums

cybershot

I am working on this jquery toggle script. I got it working in js fiddle

http://jsfiddle.net/Ywh65/

but for some reason, it won't work on my site. I am not sure I have the correct jquery running. I am setting up a tabbed widget which works, pagination which works, twitter, which works but it seems like I need many different jquery scripts to run them. is there one that runs them all. This is what I have in my head now


pagination stops working if I remove this one
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script&gt;

//tabs stop working if I remove this one
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script&gt;

I would like one that runs them all. on the jquery site. They say to run this one

  <script src="http://code.jquery.com/jquery-latest.js"></script&gt;

I tried it but didn't work.

joshuanhibbert

Seem like you are using some fairly outdated scripts that won't work with the latest version of jQuery :(

Also, you could try using something like this, that will be a little more robust (it will work no matter how many toggles you have on the page): http://jsfiddle.net/joshnh/CX8Fh/

cybershot

I don't get it. I tried your code and even removed all other script tags from the page. I even viewed the source code of the js fiddle page and grabbed the jquery script it's using. Still don't get the toggle to work.

cybershot

I got it to work. I moved the code from an external file into the actual file in the head and now it works. I don't know why it won't run from the custom .js file in the js folder but it will from the head.

joshuanhibbert

How familiar are you with using your browsers console? Whenever I'm having JS problems, that's the first place I start.

cybershot

I haven't used it much for javascript. I guess I should learn

cybershot

do you know how to remove the class you added in your code? I tried this

var $toggle = $('.toggle-button a'),
    $togglePane = $('.toggle-pane');
	$toggle.addClass('toggle-inactive');
	$toggle.on('click', function() {
    $(this).removeClass('toggle-inactive').addClass('toggle-active').parent().next($togglePane).toggle();
	}, function(){
	$(this).removeClass('toggle-active').addClass('toggle-inactive').parent().next($togglePane).toggle();
	});

It runs the toggle but does not change the class

joshuanhibbert

The easiest way would be to change .addClass to .toggleClass: http://jsfiddle.net/joshnh/CX8Fh/

cybershot

Thanks for the support. I got it all working. toggleClass was a good idea

joshuanhibbert

No worries. Glad I could help!

treehouse : what would you like to learn today?

Forums

[Solved] jquery toggle