We Keep Coding

Bootstrap to hide popover need press button twice

I'm using Bootstrap v3.3.7
I need to click twice to hide a popover.
I have problem like this https://jsfiddle.net/hik200/ejxkv8hb/1/
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false; });

I edited your fiddle, you were adding the click listener once on your button click, which did not actually trigger the close function :
function ClosePopover() {
$("#destroy").click(function(){
$("[data-toggle='popover']").popover('hide');
});
console.log('asd');
}
this is good :
function ClosePopover() {
$("[data-toggle='popover']").popover('hide');
console.log('asd')
}

jQuery slideToggle breaking when you press a link inside a div

I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you

Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.

I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});

Jquery .show button won't work

I have a jquery function that removes content and toggles a button on twitter bootstrap and after that button is toggles, if you click it it's suppose to go back to the removes content, but it's not working. Please help. Thank you!
$('#btnAdd').click(function () {
$(".RemoveSettings").remove();
$(this).toggleClass('displaying');
$('#removedcontent').show();
});
$('#removedcontent').click(function () {
$('#removedcontent').remove();
$(".RemoveSettings").show();
});

You are removing elements, you cannot show them if they are removed.
Replace your remove()'s with hide()s instead.
$('#btnAdd').click(function () {
$(".RemoveSettings").hide();
$(this).toggleClass('displaying');
$('#removedcontent').show();
});
$('#removedcontent').click(function () {
$('#removedcontent').hide();
$(".RemoveSettings").show();
});

jQuery Toggle - should close only on clicking the header

The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)

Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)

use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});

JQuery and strange behavior on hover function

I'm using a hover effect for all DIVs with class="box" on a page:
Javascript:
JQ(".box").hover(function() {
JQ(this).nextAll(".tooltip:first").css('visibility','visible');
});
JQ(".box").mouseleave(function(event) {
JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});
It works fine in Firefox and Chrome but in IE9 and Opera the .tooltip div disappears and re-appears continuously when the mouse moves within the boundaries of the .box DIV.
any ideas why the hover function keeps being called for every pixel of the DIV?
You can see a working version here

When you only pass one function to .hover() that function is called when the mouse both enters and leaves. So, you're making it visible on both entering and leaving which is conflicting with your mouseleave handler.
You could just do this:
JQ(".box").hover(function() {
JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function() {
JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});
Or, a little more DRY (less repeated code):
JQ.fn.nextTip = function(vis) {
return this.nextAll(".tooltip:first").css('visibility', vis);
}
JQ(".box").hover(function() {
JQ(this).nextTip('visible');
}, function() {
JQ(this).nextTip('hidden');
});
Working demo: http://jsfiddle.net/jfriend00/DkgVg/

You should try replacing the hover part with:
JQ(".box").mouseenter(function() {
JQ(this).nextAll(".tooltip:first").css('visibility','visible');
});
Or keep hover and do:
JQ(".box").hover(function() {
JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function(){
JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});

Just stop execution of event functions for this jQuery object
JQ(".box").hover(function() {
JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','visible');
}, function(){
JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','hidden');
});