Develop Reference

How to close navbar when clicking outside of it

How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});

$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.

$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});

Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}

Show/hide animation

I have one proplem and I hope you guys could help me with it.
Please check my jsfiddle > myFiddle
If you'll click on the 'Details' button you will see the more information about the item with a simple animation.
You can close this details by clicking on the 'cross' icon on the top left corner and you will see the closing animation.
My proplem:
When current item (container) details is opened (and I am not closing details with the 'cross' icon) if I click on other item 'Details' button the first item (container) details did not hide (with the animation).
If someone could help, that would be amazing
Thanks
jQuery('.btn.desktop').click(function(){
jQuery('.btn.desktop.active').not(this).removeClass('active');
jQuery(this).addClass('active');
jQuery('.direction-container.active').not(this).removeClass('active');
jQuery(this).addClass('active');
// If button has class active
if (jQuery('.btn.desktop').hasClass('active')) {
// If button is active add class active to direction container
jQuery(this).parent().closest('.direction-container').addClass('active');
// If direction container has class active
if (jQuery('.direction-container').hasClass('active')) {
// Show details container
jQuery('.direction-container.active').find('.details-desktop').fadeIn(500);
// Scroll down direction container after 500ms
setTimeout(function () {
jQuery('.direction-container.active').animate({scrollTop: '100px'}, 500);
}, 500);
// Show close button
setTimeout(function () {
jQuery('.direction-container.active').parent().find('.close-details-desktop').fadeIn(500);
}, 1000);
// Hide details container
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
jQuery('.direction-container.active').animate({scrollTop: '0px'}, 300);
setTimeout(function () {
jQuery('.details-desktop').fadeOut(300);
jQuery('.close-details-desktop').fadeOut(500);
}, 300);
setTimeout(function () {
jQuery('.direction-container, .btn.desktop').removeClass('active');
}, 500);
});
} else {
}
} else {
}
return false;
});

You are not fading them out.
jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
That only creates a click handler for an active container button. It doesn't trigger a click. Also, it should not be there somewhere deep inside another click handler, as it will only become active after a click on .btn.desktop
Your code is too complex, making it hard for yourself.

add "x" icon that hides the current open accordion

jQuery is still a learning process for me, but I have an accordion script here and I am looking to add a close icon to each toggle menu that will close the toggle once it has been opened, however I can't seem to get it to work. Thoughts?
FIDDLE
$('#main').each(function () {
var $accordian = $(this);
$accordian.find('.view-m').on('click', function () {
$accordian.find('.mobile-content-body').slideUp();
$accordian.find('span').css('transform', 'rotate(0deg)');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)');
$(this).next().slideDown();
$accordian.find('.close').slideToggle(500);
}
});
});

You need to replace:
$accordian.find('.close').slideToggle(500);
->
$accordian.find('.close').click(function() {
$(this).parent().slideUp(500);
});
Or
$accordian.find('.close').on('click',function() {
$(this).parent().slideUp(500);
});
JSFiddle

Return arrow back to orginal position

I have a FIDDLE
It's a toggle which shows and hides multiple toggled divs. I have it currently set to also toggle the arrow down when the div is opened, however once the div is closed the arrow still stays in a downward position, I want it to return to a rightward position.
$(this).find('span').css('transform', 'rotate(0deg)');
Full script
$(document).ready(function () {
// Toggles 1st Hidden Desktop Div
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500);
$(".dtc-two-h, dtc-three-h").hide(500);
$(this).find('span').css('transform', 'rotate(90deg)');
});
// Toggles 2nd Hidden Desktop Div
$(".dtc-two-s").click(function () {
$(".dtc-two-h").slideToggle(500);
$(".dtc-three-h, .dtc-h").hide(500);
$(this).find('span').css('transform', 'rotate(90deg)');
});
// Toggles 3rd Hidden Desktop Div
$(".dtc-three-s").click(function () {
$(".dtc-three-h").slideToggle(500);
$(".dtc-two-h, .dtc-h").hide(500);
$(this).find('span').css('transform', 'rotate(90deg)');
});
// #1
if ($('.dtc-one').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #2
if ($('.dtc-two').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #3
if ($('.dtc-three').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
});

Try adding the :visible check inside the click function. Like so:
$(".dtc-s").click(function () {
if($(".dtc-h").is(":visible"))
$(this).find('span').css('transform', 'rotate(0deg)');
else
$(this).find('span').css('transform', 'rotate(90deg)');
$(".dtc-h").slideToggle(500);
$(".dtc-two-h").hide(500);
$(".dtc-three-h").hide(500);
});
Fiddle: http://jsfiddle.net/59kz17d9/1/ (I've done it only for the first arrow)

jQuery Accordion arrow icons with seperate close button

I've got an accordion with arrow icons indicating when a section is open and closed. Once the accordion is opened the arrow points down showing the content below it.
However I've created a close button that gets appended into each section. This sits at the bottom of every section in the accordion.
I want it so that once the close button is pressed the arrow changes it's state back to closed.
$(function() {
$('#accordion h3').each(function(){
var $set = $(this).nextUntil("h3");
$set.wrapAll('<div />');
});
$('#accordion').accordion({ collapsible:true, active:true, heightStyle:"content", disabled:true, animated: false});
$('.ui-accordion-header').bind('click',function(){
theOffset = $(this).offset();
$(window).scrollTop(theOffset.top - 50);
});
$('#accordion h3.ui-accordion-header').click(function(){
var _this = $(this);
$('.ui-accordion-header-icon', _this).toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
_this.next().slideToggle();
return false;
});
$('.ui-accordion-content').append('Close<div class="clearfix"></div>');
$('.close').click(function(){
$(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
$(this).parent().slideUp('slow', function(){
$(window).scrollTop(theOffset.top - 50);
var hidecollapsebutton = true;
$('.ui-accordion-content').each(function(){
if($(this).css('display') == 'block')
{
hidecollapsebutton = false;
}
});
if(hidecollapsebutton)
{
$('.accordion-expand-all').show();
$('.accordion-collapse-all').hide();
}
});
return false;
})
});
Any help would be much appreciated. I can provide more information if it's needed. Thanks.
http://jsfiddle.net/EZT6A/

$('.close').click(function(){
$(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
As you could have found out yourself with a little simple debugging, $(this).closest('.ui-accordion-content') does not match any element here. (That’s because your close button is within div.ui-accordion-content, and the h3.ui-accordion-header is the previous sibling of that div element.)
Simple to fix: Go up to parent div (.ui-accordion-content), get previous h3 (.ui-accordion-header), and then the span (.ui-accordion-header-icon) element within it:
$(this).parents('.ui-accordion-content')
.prev('.ui-accordion-header')
.find('.ui-accordion-header-icon')
.removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-e');
http://jsfiddle.net/EZT6A/2/

I'd try changing click to on:
$(document).on("click", ".close", function(){
//change arrow state
});
It's because not every .close element exist as you binding click event.