Toggle Entire Accordion Functionality with Link or Button - accordion

Question

I have an accordion that works great. I'm trying to figure out a way to search all the flaps of the accordion:
Find String on Page (Ctrl+F) when jQuery Accordion in Use
I have used the destroy method on a link and then reinitializing on another link, but it would be great to toggle this with one button. ((I originally asked this question without this solution here, so the answer below is just this. I won't accept it until I see if any better solutions come up))
$(document).ready(function() {
$("#hide").click(function() {
$(".accordion").accordion("destroy");
});
$("#show").click(function() {
$(".accordion").accordion({
navigation : true,
collapsible : true,
heightStyle : "fill",
active :
});
});
});
I was also able to toggle the entire accordion with jQuery toggle() but this just makes the entire thing disappear. What I want is to toggle the accordion functionality, while leaving the div structure behind so it's visible, just as if someone disabled JavaScript in the browser.
So the above kind of does what I want, except in reality, the better solution is to actually remove the class .accordion because that makes the page truly look like it should. Destroying the accordion actually breaks some stuff and this is undesirable.
I thought it would be as easy as this but it's not working:
$(document).ready(function() {
$("#hide").click(function() {
$("#accordion").removeClass(".accordion");
});
$("#show").click(function() {
$("#accordion").addClass(".accordion");
});
});
This does seem to be adding and removing the class I'm telling it to, but the initial remove is not removing the accordion class to remove the accordion itself.

Answer 1

I have used the destroy method on a link and then reinitializing on another link (although one button toggle would be better):
$(document).ready(function() {
$("#hide").click(function() {
$(".accordion").accordion("destroy");
});
$("#show").click(function() {
$(".accordion").accordion({
navigation : true,
collapsible : true,
heightStyle : "fill",
active :
});
});
});
I had to edit some CSS to make this work out, but it's the best I could find.
NOTE
I should note that I ended up finding even a simpler approach to this. Simply adding a reload restores the page back to its original state:
$("#show").click(function() {
location.reload();
});

Answer 2

The destroy and reload is a very simple solution. The one button aspect is solved with this event which goes in the document ready function:
// event to destroy accordion and make it's content searchable
$("#open-1").on("click",function() {
// if the button says Enable reload to bring the accordion back
if ($(this).html() == "Enable") {
location.reload();
}
// otherwise destroy the accordion and change the button to Enable
else {
$("#accord-1").accordion('destroy');
$(this).html("Enable");
}
});
The button can say anything you want initially. The key is that it's set to "Enable" and tested for "Enable" to reload the page. You can make that any string you want as well. Here's a complete example.