We Keep Coding

Expand/Collapse one at time

How to expand one element at a time and the others to be closed?
When click open one at a time...
Thanks!
jQuery(document).ready(function($) {
$(".se-q").click( function () {
var container = $(this).parents(".se-c");
var answer = container.find(".se-a");
var trigger = container.find(".se-t");
answer.slideToggle(200);
if (trigger.hasClass("se-o")) {
trigger.removeClass("se-o");
}
else {
trigger.addClass("se-o");
}
})
});

You can use .not() , removeClass() , toggleClass();
jQuery(document).ready(function($) {
$(".se-q").click( function () {
var container = $(this).parents(".se-c");
var answer = container.find(".se-a");
var trigger = container.find(".se-t");
answer.slideToggle(200);
$('.se-t').not(trigger).removeClass('se-o'); // remove the class from all .se-t element but not this one(container.find(".se-t"))
trigger.toggleClass("se-o"); // toggle class for this(container.find(".se-t"))
})
});
Note: you can catch the point from my code .. but actually you need to provide your html code .. what I got from your code its
question/answer script .. so you may need to toggle answer as
well
For answer you can use the next line before answer.slideToggle(200);
$('.se-a').not(answer).slideUp(200);

to attach an event to each element of an array

I have made several icon, and on their mouse hover they should do something. Now, I have made an array of my Icons, but as I apply each() to the set, it does not work:
So i need the following block of code to attach a hover event to each element of the set.
var icon_set = new Array('.icon-online', '.icon-save', '.icon-sms',
'.icon-access', '.icon-support');
icon_set.each(function () {
$(this).mouseleave(function () {
img.stop().fadeOut();
});
});

Try Array.join()
var icon_set = new Array('.icon-online', '.icon-save', '.icon-sms',
'.icon-access', '.icon-support');
$(icon_set.join()).mouseleave(function () {
img.stop().fadeOut();
});
icon_set.each(function () { --> .each() doesn't work with array
Use jQuery.each() , array.forEach(callback[, thisArg]) for array.

icon_set is a raw JavaScript Array. It doesn't have an each method. Use Array.prototype.forEach or $.each and wrap each array element with $();
icon_set.forEach(function (el) {
$(el).mouseleave(function () {
$(this).stop().fadeOut();
});
});
or
$.each(icon_set, function(index, el) {
$(el).mouseleave(function () {
$(this).stop().fadeOut();
});
});
And prefer using the array literal syntax([]) over the Array constructor
['.icon-online', '.icon-save',
'.icon-sms','.icon-access', '.icon-support'].forEach(yourMouseleaveHandler);

If all your icons have a classname that begin with icon- you can use this Jquery Starts With Selector
$('*[className^="icon-"]').mouseleave(function() {
// Do something
});
PS: It will select all icons which begin with icon-. It depends, you may/may not want that.

Just as an alternative, why not give those images another class which is the same for all, then your selector becomes much simpler, i.e for a new class of myImgs.
$('.myImgs').mouseleave(function() {
$(this).stop().fadeOut();
});

how to hide submenu after click

I'm creating a dropdown menu for mobile site
http://gthost.dyndns.org/kudu/en/
when I click on My Account and click on Who we are, submenu still show,,
I Want to hide it after I click on the link.
this is JavaScript code
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".account").click(function () {
var X = $j(this).attr('id');
if (X == 1) {
$j(".submenu").hide();
$j(this).attr('id', '0');
} else {
$j(".submenu").show();
$j(this).attr('id', '1');
}
});
//Mouseup textarea false
$j(".submenu").mouseup(function () {
return false
});
$j(".account").mouseup(function () {
return false
});
//Textarea without editing.
$j(document).mouseup(function () {
$j(".submenu").hide();
$j(".account").attr('id', '');
});
});

i would try using:
$('.submenu').css({display:"none"});
instead of .hide();

Two things strike me as odd here.
Why are your ID's integers - valid names start with [a-z_] etc.
Why are you changing the ID? An ID is meant to be a unique identifier and should persist as long as the element does. If you wish to store information about the state of an element within the element itself, then perhaps look into data attributes.
Without seeing your HTML structure everyone is going to be guessing but rather than whatever you are trying to do with the ID's it looks like you could logically use jQuery.toggle:
$j(".account").click(function(){
$j(".submenu").toggle();
});

Remove class using index

This might be easy but I am having trouble in getting it to work. I am using .each() to iterate through a list. I was wondering if it is possible to remove a class using the index.
eg. If there were 10 items in the list and I want to remove the class from the 5th element when I click the 8th element for example.
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
if (index = 8)
{
$(#5).removeClass('class');
}
});
});
Anyone with any ideas? Thank you

Change
$(#5).removeClass('class');
To
$('#v-nav>ul>li:eq(4)').removeClass('class');
Its better to assign the element returned by your selector to do the same processing again to get desired element.
$(function () {
var items = $('#v-nav>ul>li')
$('#v-nav>ul>li').click(function () {
if ($(this).index() = 8)
{
$(items).eq(4).removeClass('class');
}
});
});

There's no need to iterate with each(), as each element already has an index, and using eq() will let you select elements based on the index they have in the DOM. This solution is dependant on the elements being siblings() etc.
$(function () {
var elems = $('#v-nav>ul>li');
elems.on('click', function() {
if ($(this).index()==8) elems.eq(4).removeClass('class');
});
});
You could also just bind the click to that one element:
$(function () {
$('#v-nav>ul>li:eq(7)').on('click', function() {
$(this).siblings().filter(':eq(4)').removeClass('class');
});
});
Otherwise I would just do:
$(function () {
var elems = $('#v-nav>ul>li');
$.each(elems, function(idx, elm) {
if (idx==8) elems.eq(4).removeClass('class');
});
});
As a sidenote ID's consisting of just a number (or starting with a number) is invalid.

Actually you don't need to iterate over all the li elements, instead you can do it like this way
$(function(){
$('#v-nav>ul>li').eq(7).on('click', function(){ // eq(7) is 8th li
$(this).closest('ul').find('li').eq(4).removeClass('cls'); //eq(4) is 5th li
});
});
DEMO.

removing an appended element using javascript/closure?

I currently have a click event in place that when selected appends a search box to .header, this is done using google closure. My problem now is if I click a close button I want to remove this appended element. I know using jQuery requires only .remove() but Im unsure how to achieve this in closure or vanilla js. Can anyone advise how I can do this?
Current code:
if(goog.dom.getElementsByClass('pe')){
var searchCtn = goog.dom.getElementsByClass('search');
var headerWrapper = goog.dom.getElementByClass('header');
goog.dom.append(headerWrapper,searchCtn);
}
var closeButton = goog.dom.getElement('close');
goog.events.listen(closeButton, goog.events.EventType.CLICK, function() {
console.log('Remove appended');
}, false, this);

The function is this:
goog.dom.removeNode = function(node) {
return node && node.parentNode ? node.parentNode.removeChild(node) : null;
};
So the code is like below(assume the search box is the parent of the close button):
goog.events.listen(closeButton, goog.events.EventType.CLICK, function() {
goog.dom.removeNode(this.parentNode);
}, false, this);

Just use element.removeChild(y)
$(function() {
$('span').click(function() {
this.parentNode.removeChild(this);
});
});
That's jquery, but very easy to translate over to plain old javascript, or whatever framework you are in.