I have a accordion menu with very lengthy content. So I need to implement slide effect when accordion content is opened up.
Currently if you open up the first two menu items then the last item shows up the content below the viewport so I need to have the slide up effect for the accordion menu items.
Here is my code
$(document).ready(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
});
});
DEMO
Check out this, Is this expected?
$(document).ready(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(".menu_body").each(function (event){
$(".menu_body").hide();
});
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
});
});
Related
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'
}
In mobile view of my page, when the menu option is selected, it drops down and an expanded class value is added. That value never gets removed once I click on a menu element. I need to remove the expanded class value when any item in the menu is clicked and remove the expanded menu since it covers the entire page of my one page site.
check in mobile view.
<nav class="top-bar" data-topbar="" style="position: fixed; top: 0px;">
.
.
.
</nav>
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".expanded").hasClass("expanded in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
</script>
You can do something like this.
You can remove that "expanded" class from the "top-bar" for each menu item click by checking that class is exist.
$(".top-bar-section ul li > a").click(function() {
if($('.top-bar').hasClass('expanded')){
$('.top-bar').removeClass('expanded')
}
});
Use $('#menuContent').toggleClass('expanded') when the menu button is clicked, and $('#menuContent').removeClass('expanded') when a menu item is clicked, like so:
$(document).ready(function() {
$('#menuButton').click(function(event) {
$('#menuContent').toggleClass('expanded');
});
$('.menuItem').click(function(event) {
$('#menuContent').removeClass('expanded');
});
});
Here is a fully functional JSFiddle to demonstrate.
I'd like all tabs to be collapsed on page load. Right now the first one is open by default:
$(document).ready(function($) {
$('#forms').find('.forms-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
HTML and CSS are here:
https://jsfiddle.net/re8x8cx3/
Place this inside dom ready,
$(".forms-content").hide();
Then the code will be,
$(document).ready(function($) {
$(".forms-content").hide();
$('#forms').find('.forms-toggle').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
Fiddle
Please also improve you JS:
(function($){
//store reusable global vars
var $forms = $('#forms'),
$formContents = $forms.find(".forms-content");
//hide on load
$formContents.hide();
//attach only on handler to #forms instead of to every tab separately
$forms.on('click', '.forms-toggle', function(event){
event.preventDefault();
//reuse this value (only on reference)
var $thisContent = $(this).next(),
//Expand or collapse this panel
$thisContent.slideToggle('fast');
//Hide the other panels
$formContents.not($thisContent).slideUp('fast');
});
});
i am building a responsive navbar that is fixed to the top.
I got it working so that if you click the menu icon the navigation slides up and down using jQuery's .slideDown(). And also slides up when you click a menu item in the dropdown navigation.
var toggle = false;
$(document).ready(function () {
"use strict";
$("#menu").click(function () {
if (!toggle) {
$(".nav-menu").slideDown(function () {
$(this).toggleClass("nav-expanded").css('display', '');
});
toggle = !toggle;
$("a.menu-link").click(function () {
$(".nav-menu").slideUp(function () {
$(this).toggleClass("nav-expanded").css('display', '');
});
toggle = !toggle;
});
} else {
$(".nav-menu").slideUp(function () {
$(this).toggleClass("nav-expanded").css('display', '');
});
toggle = !toggle;
}
});
});
You can see a Demo here.
However the problem is this: The menu button toggles the sliding as it should but clicking the menu items only slides the menu up once. After that the menu button still works but the sliding via click on menu item doesn't.
Thanks for all help in advance.
I changed your JS a little bit:
$(document).ready(function () {
"use strict";
$('#menu').click(function(e){
var navMenu = $(".nav-menu");
if($(this).hasClass('nav-expanded')){
navMenu.stop(true,false).slideUp();
} else {
navMenu.stop(true,false).slideDown();
}
$(this).toggleClass('nav-expanded');
});
$(".nav-menu ul li").click(function(e){
var target = $(e.currentTarget);
var menu = $('#menu');
menu.trigger('click');
});
});
Link to fiddle
When I click a parent menu (like Domains), it shows it's children, when I click one of them (like, My Domains), the page reloads with the parent menu closed (not expanded, as the image bellow)
The classes are "active" for menu active (blue background) and "open" for visible children
These are the JS codes:
// Handle clicking on the naviagtion dropdown items
jQuery('.navbar .toggle > a').click(function() {
if (!jQuery(this).next().is(":visible")) {
jQuery('.toggle a').removeClass('open');
jQuery('.toggle ul:visible').hide();
}
jQuery(this).toggleClass('open');
jQuery(this).next().slideToggle();
});
// Tabs Changer
// ===============================
//Default Action
jQuery(".tab-content").hide(); //Hide all content
if (jQuery(location).attr('hash').substr(1)!="") {
var activeTab = jQuery(location).attr('hash');
jQuery("ul").find('li').removeClass('open');
jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
jQuery(activeTab+"nav").addClass("active");
jQuery(activeTab).show();
} else {
jQuery("#tabs ul.nav .nav-tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab-content:first").show(); //Show first tab content
}
//On Click Event
jQuery("#tabs ul.nav li").click(function() {
jQuery("ul").find('li').removeClass('open');
jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
if (activeTab.substr(0,1)=="#" && activeTab.substr(1)!="") { //Determine if a tab or link
jQuery(".tab-content").hide(); //Hide all tab content
jQuery(activeTab).fadeIn(); //Fade in the active content
return false;
} else {
return true; // If link allow redirect
}
});
});
Click Login to see a live example of the menu:
https://whmcsdesigns.com/demo/clientarea.php?action=domains
If you load the page and enter the following, in the console, you will see that it works as you expect:
jQuery(".navbar .toggle.active > .nav-link").addClass('open');
jQuery(".navbar .toggle.active > ul").css('display', 'block');
However, you may run into some timing issues with this. It's not the best practice, to wrap it in jQuery(window).on, however it will get the job done:
jQuery(window).on('load', null, {}, function () {
jQuery(".navbar .toggle.active > .nav-link").addClass('open');
jQuery(".navbar .toggle.active > ul").css('display', 'block');
});
Normally, it should run synchronously, but for the sake of getting it to work, using window.onload will run this code when everything is finished loading, where we can safely assume that your menu will be ready to accept this code. So this may run much later (we're talking milliseconds), after the menu is initially setup up and ready for this code.
use event.preventDefault()
// Handle clicking on the naviagtion dropdown items
jQuery('.navbar .toggle > a').click(function(e) {
e.preventDefault();
if (!jQuery(this).next().is(":visible")) {
jQuery('.toggle a').removeClass('open');
jQuery('.toggle ul:visible').hide();
}
jQuery(this).toggleClass('open');
jQuery(this).next().slideToggle();
});
reference event.preventDefault()
in CSS you can show/hide div when menu item is active