.load (*.html) on a toggle button

[aidoru]

Hi, i'm new to this forum and I'm approaching to jquery with a sitepoint production "Jquery novice to ninja".
I'm testing the "Ajax load" method, and I've got this code:

$(document).ready(function(){
  $('#bio a').click(function(e) {
    var url = $(this).attr('href');
    $('#biography').load(url);
    e.preventDefault();
	
   });
});

it works, but I would like to transform the #bio in a toggle button, rather then a #div with a link, so I can switchon and switchoff everytime I want on the html that I load with this method.
It's possible? I've tried several solutions, but nothing, (I'm not so prepared!!!! )

Sorry for my english!

thanks a lot

Paco

[paul_wilkins]

but I would like to transform the #bio in a toggle button, rather then a #div with a link

That would seem to be as easily as replacing the link with a button with the location in a different attribute such as value, and using '#bio button' instead.

[aidoru]

Hi paul, thanks for the answer.
I've tried this code, but it works just one time and works not good.

$(document).ready(function(){

  $('#portfolio a ').click(function(e) {
    var url = $(this).attr('href');
    $('#divMain1').load(url) .toggle("slow");
    e.preventDefault();
  });
});

I've got other two button on the page that works good with this code:

$(document).ready(function(){
$('#mailme').click(function() {
  $('#contact').toggle('slow', function() {
    //here others functions
  });
});
$('#bio').click(function() {
  $('#divMain1').toggle('slow', function() {
    //here others functions
	
  });
});
});

but I'd to put biography and contact informations in the index.html.
Now I need one button that load another html in a div on the index page with the .load (url)
But I want that this button has the toggle behaviour.

I hope I was understandable.....

[paul_wilkins]

But I want that this button has the toggle behaviour.

You can use the toggleClass method when it's clicked, and check if the button has that class.

$(this).toggleClass('active');
if ($(this).hasClass('active')) {
    // Add content to div
} else {
    // Remove content from div
}

[aidoru]

thanks paul...
I'm tying to follow your reasoning
I supose that //Add content to div must be replaced by:
var url = $(this).attr('href');
$('#divMain1').load(url);
e.preventDefault();
It's right?
sorry i'm just approaching for the first time to jquery...with your and other help I would like to understand quickly this language......

[paul_wilkins]

It's right?

Yes, that seems right, though I doubt you'd need the preventdefault part with a button now.

[aidoru]

ok...
I'll test tomorrow morning...now it's too late to test code....thank a lot.....

[aidoru]

hi paul...
I've solved and it was very simple....
I've tied with yoour code but it still didn't work....so I've thought and I've tried to give two jquery instructions in the code:
1) I've assigned a toggle function to the "#div"
2) I've assigne the .load function to "#div a"
in this way it works good....
but now I've got a new problem..
I've a page with a jquery script to modify a div scrollbar (shape, color, behaviour....)
when I test it works so good, but when I load in a div on the index.html with jquery function .load(url), jquery scrollbar is not visible...I think it's a jquery conflict, but I don't understand where it is...can you help me or I must open a new tread?
thanks a lot....you helped me a lot to activate my brain......

[paul_wilkins]

but now I've got a new problem..
I've a page with a jquery script to modify a div scrollbar (shape, color, behaviour....)
when I test it works so good, but when I load in a div on the index.html with jquery function .load(url), jquery scrollbar is not visible...I think it's a jquery conflict, but I don't understand where it is...can you help me or I must open a new tread?

Yes, a new thread is the best option for you here.

[aidoru]

ok thanks, but I solved....
do you know a reason why ajax load instructions seem not to work on Konqueror and Opera 12?
thanks