MyBB Community Forums

I figure I'm not the only person who struggles with jQuery, particularly in the context of 1.6 where everything you do is likely to conflict with prototype. Rather than make new threads every time I have a question, I'm hoping some other people can get some use out of this thread.

---

So what I'm trying to do now is that on click, a div is hidden and another div takes its place. I've tried a few implementations I found on Stack Overflow and none of them seem to work. This is the last one I tried.

<script type="text/javascript">
jQuery.noConflict();

jQuery(function () {

    jQuery(".div1, .div2").hide();
    
    jQuery(".loginlink, .registerlink").bind("click", function () {

      jQuery(".div1, .div2").hide();        
        
      if (jQuery(this).attr("class") == "loginlink")
      {
        jQuery(".div1").show();
      }
      else 
      { 
        jQuery(".div2").show();
      }
    });

});
});
</script>

help?

If you explain what the ID/class of the button you're clicking is and what you want to show/hide, I should be able to help

OK!

When you click ".register-link", "#register-section" should be shown and "#login-section" should be hidden.

When you click ".login-link", #login-section" should be shown and "#register-section" should be hidden.

By default, "#login-section" should be shown and "#register-section" should be hidden.

Thanks for your help as always m(_ _)m

And a simple solution like this does not work?

$('.register-link').click(function () {
	$('#register-section').show();
	$('#login-section').hide();
});

$('.login-link').click(function () {
	$('#login-section').show();
	$('#register-section').hide();
});

For me, this didn't work ... did I do it wrong?

<script type="text/javascript">
jQuery.noConflict();

  jQuery('.register-link').click(function () {
    jQuery('#register-section').show();
    jQuery('#login-section').hide();
});

jQuery('.login-link').click(function () {
    jQuery('#login-section').show();
    jQuery('#register-section').hide();
}); 

});
</script>

Also, do you have a display: none; tag for #register-section?

Yes. You can check it here: http://harajuju.net/?action=quickthemeoc&style=19 (copy and paste link into new tab)

So the login box pops up, but the registration one doesn't?

the registration div is inside of the login box. clicking "sign up" should make it appear.

Try this out brad:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {

$('.register-link').click(function () {
    $('#register-section').show();
   $('#login-section').hide();
});

$('.login-link').click(function () {
    $('#login-section').show();
    $('#register-section').hide();
}); 

});
</script> 

I just added in a page load function and passed in $. Also you have style just sitting there in your #register-section tag. xD