We Keep Coding

first website, need assistance with certain click function

I have two tabs on this option. I have already created a mouseover and mouseleave for these two tabs. When you highlight one or the other, they share a background color.
However, now I am creating a click function. When you click on one of these tabs, I would like for it to maintain that background color, and even if the user highlighted the second time, it would not change color this time. Reason I want to do this is to show which tab is active, because each will have its own seperate content which will appear will clicked within the same div.
HTML code:
<div class="meal-details">
<h4>Lobster & Summer Vegetables with Spicy Herbed Butter</h4>
<h5 class="optiontabs meal-description">DESCRIPTION</h5>
<h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>
<div class="nutrition-breakdown">
<p>This is the nutrition info bro</p>
</div>
<div class="meal-breakdown">
<p>The meal breakdown and descrition.</p>
</div>
</div>
JQuery:
$(document).ready(function() {
$(".optiontabs").mouseover(function() {
$(this).css("background-color", "#3e597c");
});
$(".optiontabs").mouseleave(function() {
$(this).css("background-color", "#141C25");
});
$(".nutrition-description").click(function() {
$(this).css("background-color", "#3e597c");
$(this).nextAll(".nutrition-breakdown").css("display", "initial");
$(this).nextAll(".meal-breakdown").css("display", "none");
});
});
My question is, what is the best method to use in order to achieve what I have mentioned above. I have asked Jquery to change the background-color of the active tab but its not doing it. What am I doing wrong?
Thanks for the help in advance!

You have to unbind the mouseover and mouseleave once you click on an element once. You can do that using the $('element').off('event') syntax. Please look at the following code:
$(document).ready(function() {
var countClick = 0;
if(countClick==0) {
$(".optiontabs").mouseover(function() {
$(this).css("background-color", "#3e597c");
});
$(".optiontabs").mouseleave(function() {
$(this).css("background-color", "#141C25");
});
}
$(".nutrition-description").click(function() {
$(".optiontabs").off("mouseleave");
$(".optiontabs").off("mouseover");
countClick++;
$(this).css("background-color", "#3e597c");
$(this).nextAll(".nutrition-breakdown").css("display", "initial");
$(this).nextAll(".meal-breakdown").css("display", "none");
});
});

jQuery - stop url anchors from changing page position

I have a document with a bunch of sections that have information that I need to gather based on the URL anchor.
Example of what I'm trying to do:
URL
http://mywebsite.com/page.php#section-2
html
<div id='information'>Data should be here!</div>
<div id='section-1'>This is data from section 1!</div>
<div id='section-2'>This is data from section 2!</div>
<div id='section-3'>This is data from section 3!</div>
<div id='section-4'>This is data from section 4!</div>
CSS
div{
height: 500px;
}
jQuery
var hash = window.location.hash;
if(!hash == ""){
var data = $(hash).text();
$("#information").text(data);
}
But when I load the URL, The jQuery works fine, But the page jumps down to #section-2.
How do I stop this from happening?
Thanks in advance.

You condition is incorrect. It should be != instead.
if(hash != ""){
var data = $(hash).text();
$("#information").text(data);
}
And to prevent from jumping you can try using scrollTop().
$(document).ready(function(){
var hash = window.location.hash;
if(hash){
$('body').scrollTop(0);
}
});
div{
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='information'>Data should be here!</div>
<div id='section-1'>This is data from section 1!</div>
<div id='section-2'>This is data from section 2!</div>
<div id='section-3'>This is data from section 3!</div>
<div id='section-4'>This is data from section 4!</div>

the browser will jump if there is a visible div with id = hash in the page. One way to prevent this is to set your divs display = none in the css so they are not visible during page load and then change them to visible immediately after
$(function() {
$('div').show();
});
Or perhaps you might only want to show one section at a time..
$(function() {
$('#section-2').show();
});
another way might be to leave the divs visible but immediately scroll back to top of page
$(function() {
self.scrollTo(0, 0);
});

I managed to find a way to fix it!
For some reason, The timing was messing it up and causing the $('body').scrollTop(0); not to work.
I was able to fix it by adding a 10 ms delay before scrolling to the top of the page.
$(document).ready(function(){
if(hash){
setTimeout( function(){
$('body').scrollTop(0);
}, 10 );
}
});

I managed to find a way to fix it!
For some reason, The timing was messing it up and causing the $('body').scrollTop(0); not to work.
I was able to fix it by adding a 10 ms delay before scrolling to the top of the page.
$(document).ready(function(){
if(hash){
setTimeout( function(){
$('body').scrollTop(0);
}, 10 );
}
});

Target a specific div on a click event

<div class="post-story">
<div class="post-story-text">
<script>
$(document).ready(function(){
$(".more").click(function(){
var overvalue = $(".post-story-text").css("overflow-y");
if (overvalue=="hidden") {
$(".post-story-text").addClass("more-ex");
$(".post-story").addClass("more-story-ex");
}
else {
$(".post-story-text").removeClass("more-ex");
$(".post-story").removeClass("more-story-ex");
}
});
});
</script>
As HTC readied a new version of its flagship smartphone, it planned for many challenges. It didn't know that one of them would be Roshan Jamkatel, a teenager from Schaumburg, Ill.
This is true, but Tesla is more of a niche seller than a mass-market player. Which might be what HTC becomes if sales of its all-new phone don't set some all-new records.
<div class="more">....Continue Reading</div>
</div>
I'm working on project to show different posts, as the post is very long I included a button to continue reading but the problem is when I click on "...continue reading" or (.more) all the divs expand but I want only that particular div to expand.

You can try this
$(document).ready(function () {
$(".more").click(function () {
var parent = $(this).closest('.post-story');
var overvalue = parent.find(".post-story-text").css("overflow-y");
if(overvalue == "hidden") {
parent.find(".post-story-text").addClass("more-ex");
parent.find(".post-story").addClass("more-story-ex");
} else {
parent.find(".post-story-text").removeClass("more-ex");
parent.find(".post-story").removeClass("more-story-ex");
}
});
});

Two Words: EVENT DELEGATION
Click here for Explaination

Back button after a slide

i need to have a back button on my slide to return to the previous div. I did several test but without success.
there is my JS
function SlideOut(element) {
$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function () {
var move = $(this).attr('data-move');
SlideOut(move);
});
There is the demo link:
http://jsfiddle.net/VA5Pv/
thanks

You could create a history. I edited the fiddle with some dirty code but the idea is there:
var history = [];
var last;
$("#content div").click(function () {
var move = $(this).attr('data-move');
if (last) history.push(last);
last = move;
SlideOut(move);
});
$("#back").click(function () {
SlideOut(history.pop());
return false;
});
http://jsfiddle.net/VA5Pv/1/
Basically: store the "move" variable in a history array. When you want to go back, pop the last value out of the history array.

Reset
If you just want to return to the initial state (no slides opened), just add the following:
$('button.close').click(function() {
$('.opened').removeClass('opened');
});
Tracking a full history is overkill in this case.
Demo: http://jsfiddle.net/VA5Pv/4/
History
Several answers suggested using a history. Most of them used an array which keeps track of the slides the user opened and then simply pop from that to "go back".
var history = [];
$('#content div').click(function() {
var move = $(this).attr('data-move');
history.push(move);
SlideOut();
});
$('button.close').click(function() {
history.pop();
SlideOut();
});
function SlideOut() {
var element = history[history.length - 1];
// ... same as before ...
}
This would be necessary if you wanted to allow the user to open any number of slides in any order and always present them with a button to go back to the previously opened slide.
Sequence
Another solution could have been to store all the slide IDs in an array and keep a counter that tells you at which slide you are. Going back would mean decrementing the counter if it is not already at zero and then switching to that particular slide.
This would be useful if you were trying to create something like a presentation where each slide is opened in sequence and the transitions are entirely linear.
This is why I asked you to clarify what you were trying to build. Depending on the use case, the solutions could have been vastly different and far more complex than what you were actually looking for.
Thanks for accepting my answer and welcome to StackOverflow. Feel free to upvote any answers you found helpful even if they did not answer your question sufficiently.

try the following:
$('.anim button').click(function(){$(this).parent().removeClass('opened');});
I assigned this to the button in div rouge. But the target could be anything in that div you want the user to click on ...
see here: JSfiddle

Here is the DEMO
<div id="fullContainer">
<div id="right" class="anim"></div>
<div id="rouge" class="anim">Hello world!
<button class="close">Close</button>
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content">
<div data-move="right">Open Right</div>
<div data-move="rouge">Open Rouge</div>
<div id="back">Back</div>
</div>
function SlideOut(element) {
if(element == undefined) {
$('#back').hide();
}
$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function () {
var move = $(this).attr('data-move');
$('#back').show();
SlideOut(move);
});

Jquery menu slide up from from bottom of screen on hover

I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
http://sorendahljeppesen.dk/
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
P.S. also, would anyone know what type of MP3 player that is?

Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
Then give your links at the bottom of the page a class such as;
Music
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});

Try this code:
ASPX section,
<div id="categories-menu" class="hover-menu">
<h2>Categories</h2>
<ul class="actions no-style" style="display: none">
<li>//Place your content here that should show up on mouse over</li>
</ul>
</div>
JQuery section,
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".actions").slideUp();
}
function hide() {
var menu = $(this);
menu.children(".actions").slideDown();
}
$(".hover-menu").hoverIntent({
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: show, // function = onMouseOver callback (required)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hide // function = onMouseOut callback (required)
});
});
</script>
Hope this helps...

I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.