We Keep Coding

jQuery carousel dots on click always going to first item

I'm building a carousel with basic jquery - I'm using the .css() rule to simply toggle opacity between each slide.
The way I want to do this is on click of each dot I want to check if the specific class exists and if it does hide all other items and show that one. So far I have:
$('.dot').click(function() {
$('.review-module--reviews').children().css('opacity', 0);
if ($('.dot').hasClass('dot1')) {
$('.review-one').css('opacity', 1);
$('.dot1').addClass('dot-active');
} else if ($('.dot').hasClass('dot2')) {
$('.review-two').css('opacity', 1);
$('.dot2').addClass('dot-active');
} else {
$('.review-three').css('opacity', 1);
$('.dot3').addClass('dot-active');
}
});
HTML:
<div class="review-module">
<div class="review-module--reviews">
<div class="review-one">
</div>
<div class="review-two">
</div>
<div class="review-three">
</div>
</div>
<span class="slider-dots">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</span>
</div>
However when I click on dots 2 and 3, it always targets the dot1 slide in the DOM. The 'dot-active' class gets added successfully to dot1 but on click of 2 and 3, that class does not get added.
I also tried explicity checking for a true value in the if statement like so:
if ($('.dot').hasClass('dot1') === true)
Is this the best way to do this? Or should I consider a different thought process?

The error is in this code:
if ($('.dot').hasClass('dotX'))
What you're actually doing here is fetching the list of all .dot elements and checking if the first one has the dotX class. As you can imagine, this will always pick up the first .dot element, which has the dot1 class.
What you probably mean to do is to check if the element that was clicked on has the dotX class, for which you need to check only that element.
Either do so by using the current scope of the click handler:
if ($(this).hasClass('dotX'))
or by checking the target of the click event:
$('.dot').click(function(e) {
$('.review-module--reviews').children().css('opacity', 0);
if ($(e.target).hasClass('dot1')) {

Try this may be it can help you -
JAVASCRIPT CODE-
$('.dot').click(function() {
$('.review-module--reviews').children().css('opacity', 0);
$('.dot').removeClass('dot-active');
if ($(this).hasClass('dot1')) {
$('.review-one').css('opacity', 1);
$(this).addClass('dot-active');
} else if ($(this).hasClass('dot2')) {
$('.review-two').css('opacity', 1);
$(this).addClass('dot-active');
} else {
$('.review-three').css('opacity', 1);
$(this).addClass('dot-active');
}
});

I suggest to use data-* attributes instead so give every .dot a data-review that refer to the related review div :
$('.review-module--reviews div').hide(); //Hide all the slides
$('.dot').click(function() {
var review = $(this).data('review');
$('.review-module--reviews div').hide(); //Hide all slides
$('.slider-dots .dot').removeClass('dot-active'); //Remove 'dot-active' class from all the dots
$(this).addClass('dot-active'); //Active the clicked dot
$('.review-'+review).show(); //Show the related slide
});
Then on click just get the review using jQuery method .data() and show the div with related class.
Hope this helps.
$('.review-module--reviews div').hide();
$('.dot').click(function() {
var review = $(this).data('review');
$('.review-module--reviews div').hide();
$('.slider-dots .dot').removeClass('dot-active');
$(this).addClass('dot-active');
$('.review-'+review).show();
});
.dot-active{
color: green;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="slider-dots">
<div class="dot dot1" data-review="one">dot1</div>
<div class="dot dot2" data-review="two">dot2</div>
<div class="dot dot3" data-review="three">dot3</div>
</span>
<br>
<div class="review-module">
<div class="review-module--reviews">
<div class="review-one">
Review-one
</div>
<div class="review-two">
Review-two
</div>
<div class="review-three">
Review-three
</div>
</div>
</div>

jQuery AddClass and RemoveClass function for multiple element throughout web page

I submitted my code on a code review site and it highlighted that have duplicate functions within my script which can be seen below.
$(document).ready(function () {
$('#search-btn').click(function () {
$('.search-bar-wrap').toggleClass('searchActive');
$('.more-menu').removeClass('moreMenuActive');
$('account-menu').removeClass('acMenuActive');
});
$('.more-btn').click(function () {
$('.more-menu').toggleClass('moreMenuActive');
$('.account-menu').removeClass('acMenuActive');
$('.nav-bar-wrap').removeClass('searchActive');
});
$('.ac-btn').click(function () {
$('.account-menu').toggleClass('acMenuActive');
$('.nav-bar-wrap').removeClass('searchActive');
$('.more-menu').removeClass('moreMenuActive');
});
// MOBILE
$('#mobile-menu').click(function () {
$('.mobile-menu').toggleClass('mobileMenuActive');
$('.m-accord-dwn').removeClass('accordionActive');
});
$('.active-mobile-menu').click(function () {
$('.mobile-menu').toggleClass('mobileMenuActive');
$('.m-accord-dwn').removeClass('accordionActive');
});
$('.mobile-accordion').click(function () {
$('.m-accord-dwn').toggleClass('accordionActive');
});
});
The click functions demonstrated above are adding and removing classes to show can hidden element on the web page and to also give the click but an active state etc. I am trying to follow best practices for me code. Based on my code above is there a way create a global active function? Jsfiddle

The way to eliminate redundant code is to use classes and structure in your markup. By structuring the markup, the same class should be able to be applied to multiple elements, not just one element like you currently have.
You only need one style in your CSS:
.inactive {
visibility: hidden;
}
Then change your markup so each element to be hidden/shown has a "container" element around it and its button. The buttons that toggle the visibility should all have the "toggle-btn" class. And the elements to be hidden/shown all have the "pane" and "inactive" classes.
<header ...>
<div class="container">
<a class="toggle-btn ...">more</a>
<div class="pane inactive ...">
...
</div>
</div>
<div class="container">
<a class="toggle-btn ...">account</a>
<div class="pane inactive ...">
...
</div>
</div>
<div class="container">
<a class="toggle-btn ...">search</a>
<article class="pane inactive ...">
...
</article>
</div>
</header>
Now your JavaScript can be:
$(document).ready(function() {
$('.toggle-btn').click(function() {
var $pane = $(this).closest('.container').find('.pane');
if ($pane.hasClass('inactive')) {
$('.container .pane').addClass('inactive');
$pane.removeClass('inactive');
} else {
$pane.addClass('inactive');
}
});
});
Notice how you only need one event handler registered. Inside the event handler this references the button that was clicked. The "pane" element is found by first using .closest() to get the container element and then .find().
jsfiddle

Hiding or removing DIV without ID

I have website with many DIVs. Each contains a single product. I would like to remove or hide those with certain names.
For example - I would like the script to hide all the DIVs containing the name of "food".
As soon as you do this? I was looking for answers in other threads, but I do not have divs with its own ID.
Thanks in advance for your help and suggestions.
<div
data-id="AAA1"
data-title="CLoth"
data-bptf-cost="12"
data-hat-cost="12"
>
<div
data-id="AAA2"
data-title="Food"
data-bptf-cost="12"
data-hat-cost="12"
>
<div
data-id="AAB3"
data-title="Money"
data-bptf-cost="12"
data-hat-cost="12"
>

U can give each div a different or same ID. For example:
<div id="food">Some food</div>
<div id="food">Soome other food</div>
<div id="fruits">Some fruits</div>
If you now write a script, and call all ID with the name food to hide, the first two will hide and the fruit will stay open.
A very simple example, but with CSS demonstrating what i just wrote above. As you can see i hide all of the ID's named food.
http://jsfiddle.net/Lf9EN/

First things first give your divs a closing tag!
Give this a shot.
<script type="text/javascript">
setTimeout(function () {
var divs = document.body.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute('data-title') && divs[i].getAttribute('data-title') === 'Food') {
divs[i].style.visibility = 'hidden';
};
};
}, 100);
</script>
---Html---
<div data-id="AAA1"
data-title="CLoth"
data-bptf-cost="12"
data-hat-cost="12">
</div>
<div data-id="AAA2"
data-title="Food"
data-bptf-cost="12"
data-hat-cost="12">
</div>
<div data-id="AAB3"
data-title="Money"
data-bptf-cost="12"
data-hat-cost="12">
</div>

How to add slide animation when showing elements

I would like to add animation effect to following code when showing tree items.
I know that jquery has slide functions, and css has "transition", but not sure how to apply these to my code. Any ideas?
<head>
<script language="JavaScript">
function show(){
var elements = document.getElementsByClassName("label");
for(var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'block';
}
}
</script>
<style>
.label {
-webkit-padding-start: 20px;
display: none;
}
</style>
</head>
<body>
<div>
<div onclick="show()">1st Row</div>
<div>
<div class="label">First</div>
<div class="label">Second</div>
<div class="label">Third</div>
</div>
<div>2nd Row</div>
</div>
</body>

If you are planning to use jQuery then you can use slideDown and slideUp method to show/hide elements with animation. There is slideToggle method which alternatively show/hides the element with animcation. You can modify your show method as below
Working demo
function show(obj){
var $this = $(obj);//Here obj points to the element clicked
//Now you have to show/hide the next sibling of the element clicked
//We will use next() method which gives the next sibling of element
//And then call slideToggle on it to show/hide alternatively
$this.next().slideToggle();
}
Change in the markup
<div onclick="show(this)">1st Row</div>

function show() {
$('.label').slideDown();
}
This selects all elements with the .label class and slides them into view. There is also a .fadeIn() function.
Also, you can attach click handlers by selectors (like an id or class):
<div>
<div class="row">1st Row</div>
<div>
<div class="label">First</div>
<div class="label">Second</div>
<div class="label">Third</div>
</div>
<div class="row">2nd Row</div>
</div>
Notice I removed the onClick="" statement and added a class to the row div. Then you can select the element you want to attach the click event to and keep all the code in one place:
$('.row').bind('click', function () {
$(this).next().find('.label').slideToggle();
});
This JavaScript above adds a click handler to all elements with the row class and toggles the display of all of the elements with the label class in the next element.
Here is a jsfiddle: http://jsfiddle.net/L34g3/.

Select next <div /> once you know the closest selector with javascript

I am developing a website and I can't use jQuery (no discussion about this), so pure javascript and a custom javascript framework is used.
Actually I have found a situation that I don't know how to handle:
I've a group of selectors, that for each one I add a "onclick" event to display / hide a div.
For example:
<div id="menu">
<div class="menu-item">
<div class="arrow">
<a class="down">Open / Close</a>
</div>
Menu Item
<div class="extramenu hidden">
Extra menu items
</div>
</div>
<div class="menu-item">
<div class="arrow">
<a class="up">Open / Close</a>
</div>
Menu Item 2
<div class="extramenu">
Extra menu items
</div>
</div>
<div class="menu-item">
<div class="arrow">
<a class="down">Open / Close</a>
</div>
Menu Item 3
<div class="extramenu hidden">
Extra menu items
</div>
</div>
</div>
I select all "div.menu-item .arrow a" items, so I've 3 items. For each item I add a onclick event (that actually works fine).
What I need to archive is how to select the "closest" class .extramenu inside the div.menu-item. Then detect if the <a /> have a class .up or .down and if class == .up, add the class hidden; and if class == .down, remove the class hidden.
This a concept of what have to do, it's not javascript code:
var elements; // my list of elements
each(elements, function(element) {
// here element is pointing to the ANCHOR
add_event(element, "onclick", function(e) {
var submenu; // here I need to detect the submenu closest to my anchor
var state; // here I need to know if the anchor has class up or down
if (state == "up")
{
add_class(submenu, "hidden"); // hide the submenu div
remove_class(element, "up"); // remove the class up
add_class(element, "down"); // and add the class down
}
else if (state == "down")
{
remove_class(submenu, "hidden"); // remove the class to show the menu
remove_class(element, "down"); // remove the class down
add_class(element, "up"); // and add the class up
}
});
});
Thank you guys and sorry if it's not well explained, I did my best!

element.querySelectorAll allows you to select elements by CSS selector.
element.classList allows you to access the classes of an element
add_event(element, "onclick", function(e) {
var el = e.target, state;
var parent = el.parentNode;
while (!parent.classList.contains('menu-item')) {
parent = parent.parentNode;
}
var submenu = parent.querySelector('extramenu');
if (el.classList.contains('up')) {
state = 'up';
} else {
state = 'down'
}
/* ... */
});
You can write the rest of the pseudo code yourself.
I'm assuming your already using Modernizr for supporting legacy browsers like IE8. If your not, then do so.

Maybe not exactly the way you want to do this but if class up or down would be added to parent of the a ie div.arrow you could do all of the hiding/showing with css combinator +. like this:
.arrow.down + .extramenu {
/* the same styles as with hidden class */
}

This is the code you are looking for. Tested in FF5, should be cross-browser.
// use in your add_event function
var submenu = element.parentNode.nextSibling;
while(submenu && (submenu.nodeName!="DIV" || submenu.className.indexOf("extramenu")==-1)) submenu = submenu.nextSibling;
var state = element.className;