Develop Reference

Prevent event from triggering

I got two functions, one that collapses stuff when someone clicks the header of that collapsable, and I got a function that opens a modal, but the open modal icon that I use as a trigger to open the modal, is on the header of the collapsable, so when someone clicks the icon, it both opens the modal, and does the collapse stuff, but I just want to open the modal and not do the collapse stuff, so how can I prevent it from triggering my collapse?
Collapse
$(document).on('click', '.panel-heading', function () {
var valgtElement = $(this).next();
$.each($('.panel-collapse'), function (index, value) {
if ($(this).attr('id') == valgtElement.attr('id')) {
$(this).collapse('toggle');
} else {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
}
}
});
});
Icon click
$('body').on('click', '.fa-trash-o', function () {
$('#slettModal').modal();
});

Use stopPropagation
$('body').on('click', '.fa-trash-o', function (e) {
e.preventDefault();
e.stopPropagation();
$('#slettModal').modal();
});

just use event.stopPropagation()
Link for more details
$('body').on('click', '.fa-trash-o', function (e) {
e.preventDefault();
e.stopPropagation();
$('#slettModal').modal();
});

Try this
$('body').on('click', '.fa-trash-o',
function (event) {
event.stopImmediatePropagation()
$('#slettModal').modal();
});
make sure to include the event parameter in the function declaration
http://api.jquery.com/event.stopImmediatePropagation/
How to prevent other event handlers, from first handler, in jQuery

Toggle div when clicked and hide when clicked outside

I already have my code to toggle show and hide the div but whenever I try to add the Hide when clicked outside, it conflicts the toggle code, I need to toggle the div_menu but also hides it when clicked outside just like the facebook drop down menu
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
});

You can do something like
$(document).ready(function () {
$(".toggle_menu").click(function (e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e){
if(!$(e.target).closest('.toggle_menu, .div_menu').length){
$(".div_menu").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle_menu">toggle_menu</button>
<div class="div_menu">
<div>some random content menu</div>
</div>
<div style="height: 100px; background: lightgrey;">some other content goes here</div>

use e.target to find the current targeted element ,and using is() Check the current matched set of elements against a selector
$(document).ready(function () {
$(document).click(function (e) {
if ($(e.target).closest(".toggle_menu,.div_menu").length) {
$(".div_menu").toggle();
e.preventDefault();
} else {
$(".div_menu").hide();
}
});
});
DEMO

$("body").click
(
function(e){
if ($(e.target).is($(".toggle_menu"))) {
$(".div_menu").toggle();
}else{
$(".div_menu").hide();
}
}
);

try this
$(document).click(function(e){
if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
$(".div_menu").toggle();
}
});

$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e) {
$(".div_menu").hide();
});
});

How make this slider with mouse over action?

I created this slider and I want to mouse over action on numbers jquery but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.
thanks
jsfiddle version: http://jsfiddle.net/BijanZand/cmqkc59b/
Here is the current code:
function tabsrotate() {
$("#slider_a, #slider_b").tabs({
show: function (event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top);
}
$(ui.panel).hide().fadeIn(1500);
if (lastOpenedPanel) {
lastOpenedPanel.toggleClass("ui-tabs-hide").css("position", "absolute").css("top", "0").fadeOut(1500, function () {
$(this).css("position", "");
});
}
$(this).data("lastOpenedPanel", $(ui.panel));
}
}).tabs('rotate', 7777, true);
}
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
});

You can attach a mouseover event to your anchor using jQuery and inside this event trigger the anchor click:
Your $(document).ready will look like this:
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
$('.tabnavigation li a').mouseover(function(){
$(this).click();
});
});

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

jQuery issue with toggle show hide

I have create custom toggle script to show/hide content but I am getting issue with script.
When I Click to Filter text content will display and when I click to close button again, it will close and re-open. Why this is happening I don't know please some one guide me.
My JSCode:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
My JSFiddle: Sample

The click is bubbling up, so both event handlers are executed.
You need to stop the propagation
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
e.stopPropagation();
$(".rmm2-toggled ul").hide(1000);
});
FIDDLE

hey the problem is that ur close button is inside ur toggle event
use this js code instead:
$(".rmm2-toggled .rmm2-toggled-title").click(function (e) {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
$(".rmm2-toggled ul").hide(1000);
});

A possible solution would be to try this:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000, function(){
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
});
});

Override
<div class="rmm2-toggled-title" >Click to Filter</div>
with this
<div class="rmm2-toggled-title" id="open_filter">Click to Filter</div>
just add ID named "open_filter" which would be unique and close button is not inside this div.
rather adding event to parent div , add click event to its childs
updated Jquery
$("#open_filter").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});