CODEWITHSUNDEEP
phpjqueryajax
user6915268
user6915268

Reputation:

Use .toggle function in combination with the .load function in jquery

I got a button which, when it is being clicked, loades with ajax some content from another "randomstuff.php" file. The button should be able to take this "randomstuff.php" file away again without refreshing the page. My thought was to use .toggle some where in this equation but I do not know where and how :/

$(document).ready(function() {
  $("#savedButtonBox").click(function () {
    $("#content").load('moduleSavedStyles/moduleSavedStyles.php');
  });
});

With this method it loads the content into the original (index.php) website but now I want to toggle it so it gets taken away again. I need some help! :) Thanks in advance!

Upvotes: 1

Views: 34

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

If I've understood what you're asking, you want to load() some content then clear the loaded HTML on alternate clicks of the same button.

If so, you don't want toggle(). Instead you can use is(':empty') to check if any content exists in the containing element and then either fill it or empty it. Try this:

$("#savedButtonBox").click(function () {
  var $container = $('#content');
  if ($container.is(':empty')) {
    $container.load('moduleSavedStyles/moduleSavedStyles.php');
  } else {
    $container.empty();
  }
});

Working example

Upvotes: 2

Related Questions