.load (*.html) on a toggle button

JavaScript
1

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!!! :rolleyes:)

Sorry for my english!

thanks a lot

Paco

2

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.

3

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…

4

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
}
5

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…

6

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

7

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

8

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…
9

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

10

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