Using accordion jQuery I want to collapse if now is active selected tab
now if I click on same tab nothing, but if I click on another tab activated tab is changed
example on jsfiddler
how I can to set inactive(slideUp) tab if I click when is active
You have to check if it already displaying then hide it:
if($(a).css("display") == "block")
$(a).slideUp('fast');
else
$(a).slideDown('fast');
or use .is() to check if it is visible:
if($(a).is(":visible"))
$(a).slideUp('fast');
else
$(a).slideDown('fast');
UPDATED FIDDLE
FIDDLE USING is(":visible")
change this:
$(a).slideDown('fast');
to this:
$(a).slideToggle('fast');
You need to check if the slide of the accordian is already visible using :visible:
link.on('click', function (e) {
e.preventDefault();
$("#accordion div").slideUp('fast');
var $target = $(this.hash);
if (!$target.is(':visible'))
$target.slideDown('fast');
});
Example fiddle
Related
I have a dropdown menu inside a DIV.
I want the dropdown to be hide when user click anywhere else.
$('div').blur(function() { $(this).hide(); }
is not working.
I know .blur works only with <a> but in this case what is the simplest solution?
Try using tabindex attribute on your div, see:
Check this post for more information and demo.
I think the issue is that divs don't fire the onfocusout event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.
Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.
So your markup will change to:
<div><a id="focus_proxy" href="#"></a></div>
and your Javascript code should hook to the blur event on the link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Don't forget to set the focus on the link when you show the div:
$('div > #focus_proxy').focus()
I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
.click will work just fine inside the div tag. Just make sure you're not over top of the select element.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
I have a link outside of a collapse element to an anchor inside of the collapsed content.
See my plnkr example.
If I collapse the panelat the bottom the anchor tag is not executed anymore. What I want to implement is the following:
If I click on an anchor which is currently not visible (because it is e.g. in an collapsed area), then I want to extend the containing area and then apply the link.
Any ideas how I could accomplish this?
Thanks a lot
$(function(){
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('in').css({height: ''});
});
})
Like this? http://plnkr.co/edit/R2Fjsz9JnLkWEvFKUaAg?p=preview
// open collapsed items when clicking on the corresponding link
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('show');
});
Same as accepted answer but for usage with Bootstrap Collapse elements
This question already has answers here:
jQuery drop down menu closing by clicking outside
(7 answers)
Closed 8 years ago.
I have a simple Dropdown menu that I am showing on inline text links. I am using jQuery click event to show the Dropdown menu when a link is clicked on.
What I would like to do is have the Dropdown menu go back to a hidden state when a click anywhere is made. Right now you have to click the link again to close the menu.
Demo http://codepen.io/jasondavis/pen/sFpwK?editors=101
jQuery
// Show Dropdown Menu when link is clicked
$(function(){
$(".inline-dropdown-menu").click(function(e){
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
});
HTML
<span class="inline-dropdown-menu">
My Link that reveals a DropDown Menu when clicked on<span class="caret"></span>
<ul class="inline-dropdown-menu-list">
<li class="bottomBorder">
alphabetically
</li>
<li>
2. the first report, alphabetically
</li>
<li>
3. the first report, alphabetically
</li>
</ul>
</span>
http://codepen.io/anon/pen/JmLsB
$(function () {
$(".inline-dropdown-menu").click(function (e) {
$(".inline-dropdown-menu-list").hide(); // to hide other drop down
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
});
// to hide drop down if you click other than inline-dropdown-menu class
$(document).click(function (e) {
var container = $(".inline-dropdown-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".inline-dropdown-menu-list").hide();
}
});
This might be useful:
var flag = false;
$(".inline-dropdown-menu").click(function(e){
$(".inline-dropdown-menu-list").not(':hidden').hide();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
flag = true;
});
$('body').click(function(){
if (flag) {
flag = false;
return;
}
$(".inline-dropdown-menu-list").not(':hidden').hide();
});
try this
$(function(){
$(".inline-dropdown-menu").click(function(e){
e.stopPropagation();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
$("body").click(function(e){
$(".inline-dropdown-menu-list").hide();
});
});
When your link is clicked, you will have to add a click event to body. When body is clicked, you can hide your dropdown, and also remove the event on body again. I used an setTimeout to prevent double click. I also add a namespace to the click event on body (click.ddls), so you can have other click events.
So check this demo out: http://jsfiddle.net/gdxyef46/2/
// Show Dropdown Menu when link is clicked
$(function(){
$(".inline-dropdown-menu a").click(function(e){
e.preventDefault(); // Stop navigation
$("body").off("click.ddls");
$(".inline-dropdown-menu-list").toggle();
//to prevent double click
setTimeout(function(){
$("body").on("click.ddls", function(){
console.log("body clicked");
$(".inline-dropdown-menu-list").hide();
$("body").off("click.ddls");
});
}, 300);
});
});
without unique class names, you could loop through them and check if they are visible and if so , close it. This code isn't working (apologies), but will hopefully point you in the right direction. I personally like to use on("click") vs click() in case you are dealing with dynamic elements that the DOM doesn't have access to yet.
$('*').not(".inline-dropdown-menu").on("click", function(){
$('.inline-dropdown-menu-list').each(function() {
if ($(this).is(":visible")) {
$(this).toggle();
}
});
You could also create a counter based on $('.inline-dropdown-menu-list').length and assign a data-id to each so you can match and keep track of them. Hope this helps.
If I understand you correctly you want to to replicate what the drop down arrow is doing, when you click on the body. If that is so, then try this:
$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});
link to demo.
But do note that if you click the body again it will again show the drop down. You can play around to remove that if you don't want that.
Created simple accordion, which is working fine.
Issue found is : If am opening one accordion tab, if i click on it then it should not close.
if i opened another accordion then the before accordion should close and the new opened accordion should be opened only if I click on it again.
This is what I have tried.
In my implementation accordion tabs can be opened and close on its same click.
Jquery:
$('.info').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
$(this).toggleClass("open").next().slideToggle('fast');
//Hide the other panels
$(".accordion-toggle").not($(this)).removeClass("open");
$(".accordion-content").not($(this).next()).slideUp('fast');
});
Demo Link
You can put a condition check if clicked accordian has class="open" using below code -
if($(this).attr('class').indexOf('open')==-1)
$(this).toggleClass("open").next().slideToggle('fast');
Demo
EDIT - as suggested by Amin, we can use .hasClass method provided by jQuery like below
if(!$(this).hasClass('open'))
$(this).toggleClass("open").next().slideToggle('fast');
Demo with hasClass
You can also try this fiddle.
I have just added a callback function to the slideDown call.
$('.info').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
$(this).addClass("open").next().slideDown('fast',function(){
$(".accordion-toggle").not($(this)).removeClass("open");
$(".accordion-content").not($(this)).slideUp('fast');
});
//Hide the other panels
});
http://jsfiddle.net/etfs1L43/9/
i rewrote your js - since i understood your request, that you want to expand the clicked content only, if there is no current shown content...
http://jsfiddle.net/etfs1L43/12/
$(".accordion-toggle").on("click", function () {
if (!$(this).hasClass("open")) {
$(".open").next().slideUp('slow');
if (!$(".accordion-toggle").hasClass("open")) {
$(this).addClass("open").next().slideDown('slow');
} else {
$(".open").removeClass("open");
}
}
});
i got to show a dropdown menu, now i would like to hide that when anoher element (not dropdown or dropdown's children) in the DOM is focused.
(hide dropdpown when element !== dropdown||dropdown's childrens is focused in the DOM)
i tryed with focusout() with no results:
$('a').on('click',function(){
$('.drop.user-menu').fadeIn();
});
$('.drop.user-menu').on('focusout',function(){
$(this).fadeOut();
alert('antani');
});
any idea?
jsfiddle here : example
event.target() will be useful in this scenario:
$('.drop.user-menu').on('focusout',function(e){
if(e.target !== this){
$(this).fadeOut();
alert('antani');
}
});
Update:
Check this out and see if helps:
$('.a').on('click', function (e) {
e.stopPropagation();
$('.drop.user-menu').fadeToggle();
});
$('.drop.user-menu').on('click', function (e) {
e.stopPropagation();
$('.drop.user-menu').fadeIn();
});
$(document).on('click', function (e) {
if (e.target !== $('.drop.user-menu') && e.target !== $('.a')) {
$('.drop.user-menu').fadeOut();
}
});
The above script done with click in this fiddle
A DIV cannot take or lose focus (unless it has a tabindex). You'll have to give it a tabindex or add a focusable element into your div.drop.user-menu. See Which HTML elements can receive focus?.
You then also have to explicitly give that element (or an element within it) focus (with .focus()) as simply fading it in doesn't give it focus.
When the element blurs, then check if the new active element is still part of the menu. If it's not, fade out the menu.
See a working example.
There is no focus or focusout events triggered, because you're not operating on form fields.
This is probably what you want : How do I detect a click outside an element?
var menu = $('.drop.user-menu');
menu.on('click',function(e){
e.stopPropagation(); // stop clicks on menu from bubbling to document
});
$('a').on('click', function (e) {
menu.fadeIn();
e.stopPropagation(); // stop clicks on <a> from bubbling to document
});
$(document).on('click',function(e){
// any other click
if (menu.is(":visible")) {
menu.fadeOut();
}
});
http://jsfiddle.net/BBxEN/10/
Update
As Derek points out, this is not very friendly for keyboard users. Consider implementing a way for users to both open and close the menu using keyboard shortcuts.
You can tru with blur, is what you want?
Try this:
$('.drop.user-menu').on('blur',function(){
$(this).fadeOut();
alert('antani');
});