jquery Vertical Sliding Menu - javascript

trying to implement menu from :this tutorial, but dont know how to make when one submenu is toogle open to automaticly closed himself when another is toogle open.
thx

you can use a selector to get "Not This", on the this.click event which will return all of the other menus and will allow you to close them.
Supplying some source code will probably get you a better answer.

You could close all open toggles before the new one is opened.
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}

Related

Creating intellgent dropdown levels in mobile menu

I'm trying to build an off-canvas menu that has multiple levels. I've made a quick codepen of my early attempts.
How can I change the code below to have the menu close any open sections if another 'level 1' (+)link is opened? Currently I just have a toggle on any item that is clicked. I'd like to make it a bit more intelligent. Also if the level above is closed all levels below it will close too.
$('.off-canvas__content').on('click', '.nav-click', function(e) {
e.preventDefault();
$this = $(this);
$this.children('i').toggleClass('icon-minus').toggleClass('icon-plus');
$item = $this.parent('.nav__item');
$item.toggleClass('nav__item--open');
});
Adding this to your code will make things work, I guess:
if($item.hasClass('nav__item--open')) {
$item.siblings().find('.nav__item--open').removeClass('nav__item--open');
$item.siblings().find('.icon-minus').addClass('icon-plus').removeClass('icon-minus');
$item.siblings().removeClass('nav__item--open');
}
CodePen
hide all parent elements exept element on which is clicked
Edit this:
$item.toggleClass('nav__item--open').siblings().toggle();

Dynamic double menu

Good day anyone who is reading. I'm asking for help in situation that I can't solve....
I tried to do a double navigation menu - click on one of the first navigation menu will load in block "top_menu" - options from the second menu; and option on second menu will load the content to block content.
the dynamical click I realize in the next function :
$(document).ready(function() {
$('#link_from_first_menu').click(function () {
$("#top_menu").load("first_option_from_second_menu.php");
return false;
});
});
So, that part is working, I mean, I loaded the second menu from the first perfectly, but when I have the similar function to load the content from the second menu it doesn't load the content...
$('#link_from_second_menu').click(function () {
$("#content").load("content_from_second_menu.html");
return false;
});
So the result, I have a first menu and second, but can't load the content from second. Please help me realize it or give me please other variant to do it.
Ok you can try .on('click')
$(document).on('click','#link_from_second_menu',function () {
$("#content").load("content_from_second_menu.html");
return false;
});
instead of
$('#link_from_second_menu').click(function () {
$("#content").load("content_from_second_menu.html");
return false;
});
may my answer help you .. and always used to use .on('click') instead of.click() specially after append or load

check for hasClass to add class

I have a small panel that slides out from the bottom. It has a chevron up icon. I am building a jquery snippet that bring it up (opens it) and closes it but all it must change the chevron from up to down.
The opening and closing is working and the chevron changes when it opens but it doesn't reset back to chevron up when it closes. Something is wrong in my conditional statement.
This is what I have so far
<script>
$("#openchat").click(function(){
$("#floatingmenu").toggleClass("chatbox-open");
if ($(this).hasClass("chatbox-open")) {
$(this).removeClass("fa-chevron-up");
$(this).addClass("fa-chevron-down");
} else if (!$(this).hasClass("chatbox-open")) {
$(this).addClass("fa-chevron-down");
$(this).removeClass("fa-chevron-up");
}
});
</script>
I am attaching a CODEPEN DEMO
BTW, my .chatbox-open class is what opens it and closes it. The other classes are simple font-awesome classes for the icons
Any help please
Your code only ever goes into the else because #openchat never has its classes toggled elsewhere.
You can just change to this
$("#openchat").click(function () {
$("#floatingmenu").toggleClass("chatbox-open");
$(this).toggleClass("fa-chevron-up fa-chevron-down")
});
Live example: http://codepen.io/anon/pen/myBeEb
actually you don't need that check because if $(this).hasClass("chatbox-open") is false it will go straight to else and execute it.
<script>
$("#openchat").click(function(){
$("#floatingmenu").toggleClass("chatbox-open");
if ( $(this).hasClass("chatbox-open") ){
$(this).removeClass("fa-chevron-up");
$(this).addClass("fa-chevron-down");
} else {
$(this).addClass("fa-chevron-down");
$(this).removeClass("fa-chevron-up");
}
});
</script>
just remove from else the if (!$(this).hasClass("chatbox-open"))

Make toggle link only effect box in the same parent

So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!
$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});

How to close next element with specify class with jQuery

I have two panels. For thoes of two panels i have two opening buttons. So, when i click at first button my first panel is opened. Everything's fine. But now, when i need to open next panel i want to close this first. So that the two panels were not open at the same time. I don't want to add separated classes for those, want to only use opened class. This is my code and thx for help:
$('.js-sp-closing-button.opened').live('click', function(){
if($(this).next.next('.js-scrolling-list').hasClass('opened_panel')){
$(this).removeClass('opened_panel')
}
});
<span class="top_ticker_small_02 js-sp-closing-button opened">All</span>
<div class="pp_elements js-scrolling-list opened_panel">...</div>
...
<span class="top_ticker_small_02 js-sp-closing-button">All</span>
<div class="pp_elements js-scrolling-list">...</div>
You missed the next parenthesis, .next.next( would be .next().next(. You can pass class name to next function instead of having two next function calls, if you are not intentionally skipping element.
$('.js-sp-closing-button.opened').live('click', function(){
if($(this).next().next('.js-scrolling-list').hasClass('opened_panel')){
$(this).removeClass('opened_panel')
}
});
In regards to the issue with the opening and closing panels, why not just close all of the panels prior to opening a new one. Something like:
$('.js-sp-closing-button.opened').live('click', function(){
//Close all panels
$('.js-scrolling-list').removeClass('opened_panel');
/** Code to open next panel **/
});
Also, .next is a method, you need to use parenthesis to call it.
$('.js-sp-closing-button.opened').live('click', function(){
if($(this).next().next('.js-scrolling-list').hasClass('opened_panel')){
$(this).removeClass('opened_panel')
}
});
Depending on your intentions the two calls to .next() may be unnecessary. If the two panels are siblings one call to .next() which specifies a selector .js-scrolling.list is all you would need.
Example:
$('.js-sp-closing-button.opened').live('click', function(){
if($(this).next('.js-scrolling-list').hasClass('opened_panel')){
$(this).removeClass('opened_panel')
}
});
Far easier just to do this...
$('.js-scrolling-list').live('click', function(){
$('.js-scrolling-list').removeClass('opened_panel');
$(this).addClass('opened_panel');
});
Example:
http://jsfiddle.net/snKM8/2/
Here's what I managed to get, work's good - maybe someone will be benefit in future.
Thx for all of you guys:
$('.js-sp-closing-button').live('click', function(){
$(this).toggleClass('opened');
if ($(this).hasClass('opened')){
$('.js-sp-closing-button').removeClass('opened');
$(this).addClass('opened');
$('.js-scrolling-list').removeClass('opened_panel');
$(this).next('div').addClass('opened_panel');
} else {
$('.js-sp-closing-button').removeClass('opened');
$(this).next('div').removeClass('opened_panel');
$(this).removeClass('opened');
}
});

Categories

Resources