What I'm trying to do is have the 'menu-outline' ionicon display on my website, until it is clicked and the menu is toggled, where the 'close-outline' icon will replace it, and vice versa. I'm using jQuery.
I know you can toggle classes, but my ionicons are not defined by their classes, but by their names:
<a class="menu-button js-menu-button"><ion-icon name="menu-outline"></ion-icon></a>
My jQuery so far only toggles the menu but does nothing with the icon:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
/* appear and disappear */
nav.slideToggle(200);
});
Is there any way I can toggle the name of the icon? Or is there another way to do this? Thanks for any suggestions.
You can toggle the name of the icon like this:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
if (icon.attr("name") == "menu-outline") {
icon.attr("name", "close-outline");
}
else {
icon.attr("name", "menu-outline")
}
/* appear and disappear */
nav.slideToggle(200);
});
Another possibility is this:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
icon.attr('name', function(index, attribute){
return attribute == "menu-outline" ? "close-outline" : "menu-outline";
});
/* appear and disappear */
nav.slideToggle(200);
});
Related
I have 2 menu items "English" and "Spanish" that currently display on my website.
I am wanting the "Spanish" menu item to be displayed on page load and the "English" menu item to be hidden.
When the "Spanish" menu item is selected I want the "English" menu item to be displayed and the "Spanish" menu item to be hidden. As you can see I am looking for a toggle solution for the two menu items. I don't want to use a dropdown.
My strength is not if-else statements and I am hoping someone can help with a solution. I was thinking about getting the menu items by ids?
Here are the 2 menu ids:
menu-item-4002 and menu-item-4003
$(document).ready(function () {
var $LangEs = $("#menu-item-4002");
var $LangEn = $("#menu-item-4003").hide();
$("#menu-item-4002").click(function (e) {
e.preventDefault();
$LangEn.hide();
var target = $(this).data('target');
if(target){
$LangEn.filter(target).show();
}
});
});
You can check if an element is hidden using .is(':hidden'), and show the hidden button, and hide the visible one:
$(document).ready(function() {
var $LangEs = $("#menu-item-4002");
var $LangEn = $("#menu-item-4003").hide();
[$LangEs, $LangEn].forEach(function(el) {
el.click(function(e) {
e.preventDefault();
if($LangEn.is(':hidden')) {
$LangEs.hide();
$LangEn.show();
} else {
$LangEn.hide();
$LangEs.show();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-item-4002">ES</button>
<button id="menu-item-4003">EN</button>
I'm currently attempting to make a menu which is expandable when clicked, stays open, until a child is clicked, then user should be taken to that page, and the menu should still be expanded when that site is reached. (currently it collapses).
I have currently got the part down where i have a menu that expands and show childs when clicked. It's currently made in javascript. I'm making the menu with wordpress, and wordpress automatically adds class "current-menu-item" to the li which is being visited (if that helps).
var clickMenu = function() {
var getEls = document.getElementById("menu-shopmenu").getElementsByTagName("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
getEls[i].onmouseover=function() {
this.className+=" hover";
}
getEls[i].onmouseout=function() {
this.className=this.className.replace("hover", "");
}
}
}
window.addEventListener("load", clickMenu);
Now I'm just looking for help making it stay expanded once new page is loaded.
Also, will these two functions make a conflict in the design?
You can just check 'parent' of current-menu-item element. And apply display:block or any other css which makes menu element visible.
check below code if it meets your requirements.
$(document).ready(function(){
$(".current-menu-item").parent("your_parent_ul_div").css("display": "block");
});
ref-https://api.jquery.com/parent/
ref->Expand parent menu if child menu is selected
ref->https://webdesignerhut.com/active-class-navigation-menu/
The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});
Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});
What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked
I am having issues in closing the active state on my footer button. When you click footer it will slide a hidden div pushing the fix div up and changing the word footer to close, with a background color for its active state. Once you click close the div will slide down and the wording will change back to footer and the active state is hidden.
The issue
when I click the menu button it does not change the active state on the footer button. The div will slide down but the wording will not change from close to footer and the background color will not change.
The JS
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header').removeClass('open').animate({'bottom': "-=120"});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function(){
var $this = $(this);
$this.toggleClass('footerButton');
if($this.hasClass('footerButton')){
$this.text('Footer');
}
else
{
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Fiddle.
How can I fix this issue?
I added the following function as a callback for the animate function when clicking your menu button. It will check to see if the footer button is in the active state, and if so will update accordingly, otherwise it will leave it be.
function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
}
Updated Fiddle
I have a main navigation menu with a sub-menu that appears on hover, the problem I have is that on hovering on and off the menu sub-menu flickers between the slide and fade states provided by its function (menuHover) - I have a fiddle which is viewable here
The function itself is:
///<summary>
///drop down menu navigation
///</summary>
var menuHover = {
//initialise our function
init: function(){
var menuItem = $(".navItem");
//each menu item
menuItem.each(function(){
//checks to see if we have sub-navigation items
var $this = $(this),
hasSub = $this.children(".subNav"),
isSub = hasSub.length > 0;
//toggle visibility on sub items when hovered
if(isSub){
$this.hover(
//on hover
function(){
hasSub.slideDown("fast");
},
// off hover
function(){
hasSub.fadeOut(350);
});
}
});
}
};
Any help would be gratefully appreciated!
Stop using JS for menus! Use CSS instead!
The basics: http://www.seoconsultants.com/css/menus/tutorial/
Example I made(Copyrighted, do not just copy it): http://tinkerbin.com/W0iL32hh