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");
});
});

Using JS, how do I swap out a specifc instance of text instead of all instances?

Sorry if this is a really noobish question but I have just made a form with sections that are toggle-able. Each section has a '.header' which on click will perform a slideToggle on the section div.
I would like to add a triangle either pointing down or sideways to let people know it is toggle-able. (i.e ▶ or ▼).
I have the triangle in a span with the class '.arrowTog'
I was able to get partial success with
$('.header').on('click', function() {
if ($('.arrowTog').text().contains('▼')){
$('.arrowTog').text('▶');
}else{
$('.arrowTog').text('▼');
}
});
When I clicked on one all of the triangles swapped so I tried this (which causes none of them to rotate at all):
$('.header').on('click', function() {
if ($(this).prev('.arrowTog').text().contains('▼')){
$(this).prev('.arrowTog').text('▶');
}else{
$(this).prev('.arrowTog').text('▼');
}
});
This is a sample of the HTML
<div class="header" style="cursor: pointer;">
<span class="arrowTog">▶ </span>
<b>Merchant</b>
</div>
<div class="searchContent" style="display:none;">
Any ideas what I am doing wrong?
Thanks!

In your first version, the problem is you're finding every .arrowTog in the page. You can use the fact that within the click handler, this is bound to the element that was clicked, and then just search within that using find:
$('.header').on('click', function() {
var arrow = $(this).find('.arrowTog');
if (arrow.text().contains('▼')){
arrow.text('▶');
} else {
arrow.text('▼');
}
});

You're using a class. You probably have a number of elements with the same class in it, so jQuery is matching all of them and doing this transformation to all of them.
Use a context (All .arrowTog RIGHT INSIDE THIS NODE):
$('.header').on('click', function(evt) {
if ($('.arrowTog', evt.target).text().contains('▼')){
$('.arrowTog', evt.target).text('▶');
}else{
$('.arrowTog', evt.target).text('▼');
}
});

Why not use CSS?
.arrowTog:before {
content: '▶';
}
.arrowTog.open:before {
content: '▼';
}
And then
$('.header').on('click', function() {
$(this).toggleClass('open');
});

If there are less than 3 divs then show other div

i am fading in multiple divs all with the same class 'noti_box' using jquery. these are essentially notification boxes, and a user can close one or all of these boxes. what i am trying to do is find a way to compensate for the closed divs by showing another div in its place using jquery.
so if there are 3 notification boxes / 'noti_box' divs showing, and a user closes one of these, i want jquery to show a different div, 'other_div' to fill the space of the closed div. same if the user closes 2 of 3 then 2 'other_divs' should be shown and so on.
i need to find a way of being able to do this only after each 'noti_box' div has faded in, as they take about 2 to 3 seconds to fade in and so dont want divs being shown to fill gaps whilst the other div is still trying to fade in still. so needs to be only when a user closes the div.
heres my code at the moment, hope someone can help and show me where im going wrong
<div class="right_panel_outer">
<div class="right_panel">
<div class="noti_box"><div class="noti_text"><h4>You have 11 New Messages</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>You have 11 New Notifications</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>6 Matters Needing Your Attention</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>3 Insurance Due To Expire Today</h4></div><div class="close_box"></div></div>
<div class="noti_box"><div class="noti_text"><h4>1 Outstanding Application</h4></div><div class="close_box"></div></div>
<div class="other_div">HELLO</div>
<div class="other_div">HELLO</div>
</div>
</div>
<script type="text/javascript">
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
});
$('.close_box').on('click', function() {
$(this).closest('.noti_box').fadeOut();
});
</script>
<script>
$('.other_div').hide();
if ($('.noti_box').length < 3) {
$('.other_div').show("fast");
}
</script>

I think this might be what you are looking for:
<script type="text/javascript">
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
});
$('.close_box').on('click', function() {
$(this).closest('.noti_box').fadeOut(function() { //is called once fadeOut completes
$(".other_div:hidden:first").show() //gets the other divs that are hidden, then selects the first one and shows it
});
});
</script>
<script>
$('.other_div').hide();
</script>

Why not just place it here?
$('.noti_box').each(function(i) {
$(this).hide().delay(i * 1500).fadeIn(1500);
$('.other_div').show("fast");
});
Then one is opened every time another is closed.

You could try doing something like this
http://jsfiddle.net/acidrat/Fnya8/1/
$('.noti_box').each(function(i) {
$(this).toggleClass('fading');
$(this).hide().delay(i * 1500).fadeIn(1500, function() {
$(this).toggleClass('fading');
});
});
$('.close_box').on('click', function() {
if ($(".noti_box.fading").size() <= 0) {
$(this).closest('.noti_box').fadeOut();
}
});
$('.other_div').hide();
if ($('.noti_box').length < 3) {
$('.other_div').show("fast");
}

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);
});

Showing and hiding items in Windows 8 application

I'm writing my first Windows 8 application, but I'm stuck already.
What I want to do is display an html/winjs element, depending on which index is clicked in a listview.
The current code I've written works to some extent. It will display the first element (albumListView), but after that no other items will show. I've read through the WinJS docs, but I still can't figure out what I'm doing wrong.
What am I doing wrong? And is there an easier way to do what I'm trying to achieve?
Here's the code I've written:
My html:
<div id="albumListView" class="hidden" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#albumTemplate'), layout:{type:WinJS.UI.GridLayout}, selectionMode:'none'}"></div>
<div id="songsListView" class="hidden" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#songsTemplate'), layout:{type:WinJS.UI.ListLayout}}"></div>
My CSS:
.hidden {
display:none;
}
My JS:
function hidePanelViewItems() { //hide all panel items
var items = [albumListView, songsListView];
for (var i = 0; i < items.length; i++) {
WinJS.Utilities.addClass(items[i], "hidden");
}
return true;
}
function showItem(item) { //show a single item in the panel
hidePanelViewItems();
WinJS.Utilities.toggleClass(item, "hidden");
return true;
}
args.setPromise(WinJS.UI.processAll().done(function () {
//hide all panel listviews
hidePanelViewItems();
//show the album view as a default
showItem(albumListView);
//deal with menu item clicks
menuListView.addEventListener("iteminvoked", function (eventInfo) {
switch (eventInfo.detail.itemIndex)
{
case 0:
showItem(albumListView);
break;
case 1:
showItem(songsListView);
break;
}
});
}))
Thanks in advance for any replies :)

I ran into something similar. If you set a listview's style to display:none, you need to call forceLayout() to make it visible again. http://msdn.microsoft.com/en-us/library/windows/apps/hh758352.aspx

Solved! After hours of messing around with this code, I have now discovered that it was fine all along! The problem was that data wasn't actually binding to my listviews, as they were hidden!