jQuery Forum

The first line should probably be -

1. jQuery(document).ready(function() {

All of your other click functions are nested in a click function, which is just a Bad Thing TM

If your other clicks do not work in the document ready handler then there must be something else that you're not sharing with us.

Wait, you're saying that the code above WORKS?!

Ah, so what you didn't tell us is that you're trying to make this work with Wordpress. And, so you need to avoid conflict with existing JS code used by Wordpress.

So the problem is likely to be a conflict with wordpress and not an error in my jquery code? 

Start your script with 

No luck im afraid, like this right?

1. jQuery(function( $ ) {
2.         $('.toggle-on').on( "click", function(){
3.                 $('.post-info').addClass("post-info-toggle");
4.                 $(this).addClass("toggle-off");
5.                 $(this).removeClass("toggle-on");
6.            
7.         });
8.         $('.toggle-off').on( "click", function(){
9.                 $('.post-info').removeClass("post-info-toggle");
10.                 $(this).addClass("toggle-on");
11.                 $(this).removeClass("toggle-off");
12.         });
13.        
14.         $('.list-toggle').on( "click", function(){
15.                 $('.post-text').hide();
16.                 $('.post-list').show();
17.                 $('.info-toggle').addClass("toggle-off");
18.                 $('.info-toggle').removeClass("toggle-on");
19.         });
20.        
21.         $('.info-toggle').on( "click", function(){
22.                 $('.post-text').show();
23.                 $('.post-list').hide();
24.                 $('.list-toggle').addClass("toggle-off");
25.                 $('.list-toggle').removeClass("toggle-on");
26.     });
27. })

I have this code in the footer also,
 

1. jQuery(".post-list" ).appendTo( ".post-info" );
   
   

Could it be to do with this?

OK, I never found out exactly what was wrong with the code, but i think the browser had trouble responding to the fact that the css classes we changing.

I found a solution using this code instead, which doesnt have a toggle-on and a togge-off class, but instead one 'active' class and an 'if / else" thing (conditional?). Anyways this works now if anyones interested

1. jQuery(function( $ ) {
2.    
3.         $('.list-toggle').on( "click", function(){
4.                 if ( $(this).hasClass("active") ) {
5.                     $('.post-info').addClass("post-info-toggle");
6.                     $(this).removeClass("active");
7.                 }
8.                 else {
9.                 $('.post-text').hide();
10.                 $('.post-list').show();
11.                 $('.info-toggle').removeClass("active");
12.                 $(this).addClass("active");
13.                 $('.post-info').removeClass("post-info-toggle");
14.             }
15.          });
16.        
17.         $('.info-toggle').on( "click", function(){
18.                 if ( $(".info-toggle").hasClass("active") ) {
19.                     $('.post-info').addClass("post-info-toggle");
20.                     $(this).removeClass("active");
21.             }
22.                 else {
23.                 $('.post-text').show();
24.                 $('.post-list').hide();
25.                 $('.list-toggle').removeClass("active");
26.                 $(this).addClass("active");
27.                 $('.post-info').removeClass("post-info-toggle");
28.                 }
29.                
30.     });
31. })

Your code is flawed because you expect these toggle-on elements to magically switch from one handler to another. They won’t. Once they start with one handler, they never switch to the other.