Develop Reference

In jquery, when i click close link and outside the div my toggle class not getting hide

I am doing toggle class to hide and show, toggle class is working fine, but when i click that "Close" link and outside the div the current displaying div was not getting hide, i am new to jquery. help me if any one know this answer, i have attacted a code below.
Html code
<div class="NoViews">
<img src="~/Content/Theme/images/fav.png" alt="">
<p>Shortlist</p>
<span>1</span>
<div class="shortlistProperty">
<div class="shortlistHeader">
<h5>Shortlisted properties (1)
<p class="flRight"><a class="closeShortlist" href="#">Close</a></p>
</h5>
</div>
<div class="shortlistBody">
Div content
</div>
</div>
</div>
jquery code
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function () {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
});
$(".closeShortlist").click(function () {
$('.shortlistProperty').toggle();
$('.shortlistProperty').toggle(false);
});
$(".searchView").click(function () {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
});
$(".closemySearch").click(function () {
$('.mySearchProperty').toggle();
$('.mySearchProperty').toggle(false);
});
});
In this, i want when i click that close link my current div have to get hides and when i click out side the current div have to close.

You have to stop the event bubble. Check the code.
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function (e) {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
e.stopPropagation();
});
$('.shortlistProperty').click(function (e) {
e.stopPropagation();
});
$(".closeShortlist").click(function (e) {
$('.shortlistProperty').toggle();
e.stopPropagation();
});
$(".searchView").click(function (e) {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
e.stopPropagation();
});
$(".closemySearch").click(function (e) {
$('.mySearchProperty').toggle();
e.stopPropagation();
});
$('body').click(function (e) {
$('.shortlistProperty').hide();
});
});

I'm using this code for toggle. How to create multiple toggle using this code

$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function () {
$(".slidingDiv").slideDown(
function () {
$("#plus").text("Hide responses")
}
);
}, function () {
$(".slidingDiv").slideUp(
function () {
$("#plus").text("Show responses")
}
);
});
});
Write a responses
Show responses
<div class="slidingDiv">Test Here </div>
Write a responses
Show responses
<div class="slidingDiv">Test Here </div>

Since id must be unique, you need to use class instead:
Write a responses
Show responses
<div class="slidingDiv">Test Here</div>
Write a responses
Show responses
<div class="slidingDiv">Test Here</div>
then you can do:
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function () {
$(this).next().slideDown(
function () {
$(this).prev().text("Hide responses")
});
}, function () {
$(this).next().slideUp(
function () {
$(this).prev().text("Show responses")
});
});
});
Fiddle Demo

Toggle up all elements if were open

For this markup:
<div id="citate">Citate</div>
<div id="unu" hidden>Autori</div>
<div id="autori" hidden>
<ul>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
</ul>
</div>
<div id="doi" hidden>Subiecte</div>
<div id="subiecte" hidden>
<ul>
<li>Creanga</li>
<li>Creanga</li>
<li>Creanga</li>
<li>Creanga</li>
</ul>
</div>
I have this code JS :
$(document).ready(function () {
$("div#citate").click(function () {
$("div#unu ").slideToggle();
});
});
$(document).ready(function () {
$("div#citate").click(function () {
$("div#doi ").slideToggle();
});
});
$(document).ready(function () {
$("div#unu").click(function () {
$("div#autori").slideToggle();
});
});
$(document).ready(function () {
$("div#doi").click(function () {
$("div#subiecte").slideToggle();
});
});
and i want when i click second time on "Citate" it will toogleup all other elements from toogledown "Autori" and "Subiecte" if there were open. I try to do it, I searched how to but can not do it right.
I used slideToggle() function.

This can help you.
$("div#citate").click(function(){
if( $('div#autori, div#subiecte').is(':visible') ){
$("div#unu, div#doi,div#autori, div#subiecte").slideUp();
}
});
Fiddle Demo
No need to add $(document).ready again and agian

Its Working use callback : See DEMO

This is not a optimal solution as it does not scale at all, but it works. If you toggle the parent (#citate) and your submenus are visible, then close them by using slideToggle or slideUp.
$(document).ready(function(){
$("div#citate").click(function(){
$("div#unu").slideToggle();
$("div#doi").slideToggle();
if($("div#autori").is(":visible")) {
$("div#autori").slideToggle();
}
if($("div#subiecte").is(":visible")) {
$("div#subiecte").slideToggle();
}
});
$("div#unu").click(function(){
$("div#autori").slideToggle();
});
$("div#doi").click(function(){
$("div#subiecte").slideToggle();
});
});

How can I trigger a 'focusout' after I click on an element?

I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?

Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});

You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO

try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/

Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});

Button click event not firing in jQuery

This is the method:
$(document).ready(function () {
$('btnDelete1').click(function () {
alert("something");
})
});
And this is the code for the button:
<input type="submit" value="Delete Role" disabled="disabled" id="btnDelete1"/>
But whenever I click the button, the alert isn't happening. Why is this?

The problem isn't connected with MVC anyway, you missed # in Jquery selector only.
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});
EDIT:
And as mentioned Jeffrey, you forget ; too

Your selector is wrong
It should be
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});

Did you forget a ;?
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});