We Keep Coding

add and remove class on same button or element

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});

To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!

You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this

Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});

DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way

You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>

Use toggleClass('show')
It will add the class on one click and remove the class on the second click.

<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>

Click event not firing using ON?

When i click on any button , click event is not fired . Tough i made it work using $("div").on("click", "button", function () { but i want to see it working using .class selector .
Syntax of ON:
.on( events [, selector ] [, data ], handler )
Html:
<div>
<button class='alert'>Alert!</button>
</div>
Code:
$(document).ready(function () {
$("div button").on("click", ".alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
sample to work here
It may be basic but i'm seriously starting to try & understand few concepts . Help me understand .

Your current code is trying to delegate the event for element with class alert in button. which do not exists.
If you are trying to delegate the event for button with class alert,You need to use:
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
Working Demo

$(document).ready(function () {
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});

You can also try this...
$(document).ready(function () {
$("div button.alert").on("click", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
FIDDLE for reference

jquery input field focus out except a div

I'm making ajax suggestion of search in which,
a suggestion box will be displayed
<div id="searchbox">
<input type="text" name="search" class="searchinput"/>
</div>
<div id="sugbox">
......
<a href="product.php?id=2" >Item 1</a>
.....
</div>
and Javascript
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#searchbox .searchinput').focusout(
function () {
$('#searchbox #sugbox').hide();
});
The suggestion box will open if the search textbox #searchbox .searchinput is focus and hide if focusout.
Problem : whenever i'm clicking the link on suggestion box, the suggestion box hides (because of input focusout event).
How can i check if the target div is the suggestion box so don't hide the box
ex ..
$('#searchbox .searchinput').focusout(
function () {
if(target div is not sugbox)
$('#searchbox #sugbox').hide();
});

try to assign a class to sugbox at hover class
$(".searchinput").focus(function(){
$("#sugbox").show();
});
$(".searchinput").focusout(function(){
if(!$("#sugbox").hasClass("hovered"))
$("#sugbox").hide();
});
$("#sugbox").hover(function(){
$(this).addClass("hovered");
},function(){
$(this).removeClass("hovered");
});
here is example at jsfiddle : http://jsfiddle.net/kyawlay/9wg49L2b/5

add a mousedown handler (triggerd before focusout/blur I think) on the box also, set a flag to true when clicked, then check this flag before hidding
var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
function () { boxClicked = true;});
$(document).mousedown(// reset boxclicked
function () { boxClicked = false;});
$('#searchbox .searchinput').focus(
function () {
$('#searchbox #sugbox').show();
});
$('#mainsearch .searchinput').focusout(
function () {
if(!boxClicked) $('#mainsearch #sugbox').hide();// add condition
});

You are using wrong selector. Check this demo. http://jsfiddle.net/m711LLwr/
$('#searchbox #sugbox').show();
Should be
$('#mainsearch #sugbox').show();

Try this, What it does is when searchinput loses focus then if sugbox has no class 'NoHide', then hide it.
On body on click event, the NoHide class is assigned to sugbox if click target is not searchinput and not sugbox and not sugbox anchor.
If event target is not in above 3 mentioned selectors then remove class NoHide. I have a fiddle but I want you to try in your page as fiddle will confuse you( as it has iframe and body area of fiddle is limited).
$('#searchbox .searchinput').focus(
function () {
$('#sugbox').show();
});
$('#searchbox .searchinput').focusout(
function (event) {
if(!$('#sugbox').hasClass('NoHide'))
$('#sugbox').hide();
});
$('body').on('click',
function (event) {
if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") && !$(event.target).is("#sugbox")){
$("#sugbox").hide().removeClass('NoHide');
}else
{
$("#sugbox").show().addClass('NoHide');
}
});

removing and adding css class onclick

i am having some trouble configuring how to change css classes of a span within a div on onclick event.
javascript:
$(document).on('click', '.list_accordion_toggle', function (event) {
$(this).toggleClass('list_item collapse').next().toggle();
});
view:
<div class="list_accordion_toggle" id="letter">
<span data-bind=" text: Letter"></span>
<span class="icon-minus-sign"></span>
</div>
when the user clicks on the div the icon-minus-sign should be replaced with icon-plus-sign and will continue to toggle with every click.
do i use the toggleClass or removeClass then addClass?

Try
$(document).on('click', '.list_accordion_toggle', function (event) {
$(this).toggleClass('list_item collapse').next().toggle();
$(this).find('.icon-minus-sign, .icon-plus-sign').toggleClass('icon-minus-sign icon-plus-sign')
});
Demo: Fiddle

Try this
iCount=0;
$(document).on('click', '.list_accordion_toggle', function (event) {
if(iCount==0){
$(this).addClass(icon-minus-sign);
$(this).removeClass(icon-plus-sign);
iCount=1;
}
else{
$(this).addClass(icon-plus-sign);
$(this).removeClass(icon-minus-sign);
}
});

Click event is not working for dynamically changed class in jquery

I have two class .btnn and .sleep_avail sometimes i changes the css of a anchor from .btnn to .sleep_avail
Now i have two function for anchor click
$('.btnn').click(function () {
alert('yes btn');
});
And Second one is
$('.sleep_avail').click(function () {
alert('yes sleep');
});
Now when i click on the anchor with class sleep_avail which is changed dynamically from btnn class the event written for btnn raised and i get response accordingly. But what i need is that the event for sleep_avail should be raised. Kindly help.

Anytime, you use dynamically created tags, you must use
$(document).on('#event','#selector',function () {...});
so here
$(document).on('click','.sleep_avail',function () {...});
Because event handlers bind to the currently elements, they have to exist on the page when .on()is called

Here is the working DEMO http://jsfiddle.net/ARBdU/
$(document).on('click','.btnn, .sleep_avail',function () {
if($(this).hasClass('btnn'))
{
...
}
else if($(this).hasClass('sleep_avail'))
{
...
}
});

try
$(document).on('click','.sleep_avail',function () {