We Keep Coding

Slide Toggle will not stay up once clicked?

I am making a menu and have ran in to some jQuery issues.
I want my toggles to stay up once they have been clicked but instead they are sliding up but then straight back down again.
I have managed so far to have one close and another open simultaneously. Any thoughts?
Here is the current JS :
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function(){
jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
jQuery(this).find('.food-content').slideDown();
});
I have made a JS Fiddle:
https://jsfiddle.net/marmaaduke/uyb4Lzuy/

Just exclude the current item clicked from the slideUp (with not) and use slideToggle for the current item.
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function () {
jQuery(".menu-container, .full-menu-container").siblings().not(this).find('.food-content').slideUp();
jQuery(this).find('.food-content').slideToggle();
});
https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/

How to clear content div and reappear with javascript

I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??

You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo

Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.

Disable a link for couple of seconds

I'm making a book-website with a jQuery-plugin. Every time a link is clicked, the book-page switches to the next page and the .active class switches from link. The problem is that if you click fast between the pages, the active class switches but the movement of the book is too slow so you don't hop to the next page.
I'm trying disable the link after u clicked on one. My idea was just removing an attribute for a couple of seconds like this:
$('.button').click(function(e){
.. switch page using id
.. switch .active
$(".button li a").removeAttr("id");
}
So when the page is loaded, and the active class is switched. U cannot click on another link until the attribute is put back on.
How can remove an attribute for a couple of seconds? Or are there other options to disable a link for a period of time without removing the attribute?

An easy (but a bit hacky) way to accomplish this is returning early out of the handler if the action is already in progress:
var pageIsTurning = false;
$('.button').click(function(e){
if (pageIsTurning) { return; }
// do your stuff and change the page
}):
According to the docs of the booklet plugin you can bind to the bookletstart and bookletchange events which are where you'd update the pageIsTurning variable.
$(".selector").bind("bookletstart", function(event, data) {
pageIsTurning = true;
});
$(".selector").bind("bookletchange", function(event, data) {
pageIsTurning = false;
});
Note that this approach wouldn't work if you have more than one booklet on the page but could easily be adapted.

Javascript slideonlyone to slide div and link to page

I am using the script below on my wordpress sidebar menu and it works perfectly. However on some of the menu options I want to slide the div AND link to a page. I've worked on this all morning with no success. Can you please tell me what I need to add to this script to make it work? Thank you in advance for your help.
function slideonlyone(thechosenone) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);
} else {
$(this).slideUp(500);
}
}
);
}
The page I am referencing is: http://www.nicksardone.com/slide-down.php
The javascript in the question is a function that when a top level menu item is selected it slides the selected div down to show other links. The question is I want the top level menu option (Human resources) for example to slide the div down AND link to another page on the site. Hope that clarifies...

the question is not clear, what do you mean with "and link to page" ?
EDIT:
if your problem is that clicking on the div it works fine but clicking on the link doesn't work.
you have to call the slideonlyone function on the href property of the link passing as parameter the id of his parent div.
link this:
<a id="someID" href="javascript:slideonlyOne(MyParentDivID)">text</a>
but if you want that it opens another page:
function slideonlyone(thechosenone, url) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);window.open(url);
} else {
$(this).slideUp(500);
}
}
);
}

link to automatically expanded treemenu text disables links in the text

I found this topic: How to link directly to an FAQ option expanded and used this script in my website:
$(window).load(function(){
$('.expand_text').each(function() {
$(this).css("display", "none");
});
$('.treenode').click(function() {
$(this).next('.expand_text').slideToggle("fast")
return false;
});
(function(hash){
if (hash !== undefined && hash.substring(0,1) === "#") {
$(hash).slideToggle("fast");
}
})(window.location.hash);
});
So now I can provide a link to a particular page which opens with one of the menu items automatically expanded. For example: http://drgiannopoulos.com/estheticdentistry.html#bleach It is in Greek, but its obvious that you can land on the page with the first menu item expanded. However, if you scroll down a bit you'll notice two three lettered underlined words (sorry again its Greek!). These are links and they don't work! You can right click and select "open in a new tab / window" which will work fine, but the simple left click has been rendered inactive. I think this has to do with the above mentioned script and since I am totally new to all this I would like your help.
Thanks