OK, so I am sorry if this question is repeated BUT I really could not figure answer.
O have menu with classes, and I want that when I click on some menu items .menuitem > a
that link have more paddingBottom.
So I managed to use .click function and animate function but that add padding to entire class ( all menu items ).
What I need is adding padding only to THAT CLICKED menu.
Code that make padding to all menu items ( entire class )
$(".menuitem" ).click(function() {
$('.mainNav > ul > li > a').animate({paddingBottom:"+=17px"});
});
when I click on some menu items .menuitem > a that link have more paddingBottom
Within the click handler, the particular .menuitem element that was clicked can be referred to by this. Thus, using $(this) you can use jQuery's DOM traversal method(s) to move from that element to the related one you want to animate.
If the anchor is a child of the .menuitem element that you are binding the click handler to then the simplest way to get a reference to that anchor is with the .find() method:
$( ".menuitem" ).click(function() {
$(this).find("a").animate({paddingBottom:"+=17px"});
});
you can use this key word to select your 'a' tag which you click on it now 'only'
$('.menuitem').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
or more specific
$('.menuitem li').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
Related
This is doing my head in. Sorry if it's a schoolboy error. I have a very straight forward jquery accordion and I can toggle a style on the clickable header for each content by adding a class, but the class does not go when I click to collapse that element itself, only when I expand a sibling. I've popped this on jsfiddle with a simple colour switch.
$(document).ready(function ($) {
$('#showHideAccordion').find('h2').click(function () {
$('.active').removeClass('active');
//Expand or collapse this panel
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
//Hide the other panels
$(".podContent").not($(this).next()).slideUp('slow').removeClass('active');
});
});
http://jsfiddle.net/wf73o6c6/
When you click the already active item, you remove the active class from it with this line:
$('.active').removeClass('active');
then you add it again with this line:
$(this).toggleClass('active');
Making this change to the first line will fix it:
$('.active').not($(this)).removeClass('active');
This way you remove the active class from all the other items, and with the toggleClass line that comes after, you remove the class from the clicked item.
You don't need to remove the class again on your last line, you already took care of that (I see you already used the .not() function here, so your mistake was probably just lack of attention).
$(".podContent").not($(this).next()).slideUp('slow');
Also, unrelated, but why $('#showHideAccordion').find('h2') and not just $('#showHideAccordion h2') ?
Here's an updated fiddle: http://jsfiddle.net/wf73o6c6/2/
I have list of links, and if you click on any of them, it will toggle show/hide text below it in separate div. Also it hides all other divs if one of them is shown
This code manages it:
$(document).ready(function(){
$('.targetDiv').hide();
$('.hideshow').click(function () {
$('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});});
And this is what the link looks like
<a class="hideshow" target="1"><div class="cennikPlus"><i class="fa fa-plus-square"></i></div>Something something</a>
What i need to do is to change
fa-plus-square
to
fa-minus-square
when open and back, when closed.
I found "toggleClass" which should be useful in this case, but I am not sure how to select i inside div inside a
Can you help me with this?
Also the website is here
Find the <i> and call toggleClass
$(this).find("i").toggleClass("fa-plus-square fa-minus-square")
To select the <i> inside your tag, you just do this:
$( this ).find( 'i' )
you can chain it all together to toggle the class--
$( this ).find( 'i' ).toggleClass( 'fa-plus-square fa-minus-square' )
and for siblings, if you want them all to have the class 'fa-minus-square', you do this:
$( this ).siblings().find( 'i' ).removeClass( 'fa-plus-square' ).addClass( 'fa-minus-square' )
Using parent - child selectors in jQuery is quite simple...
$("a > div > i")
will select the i element, that is a child of the div element, that is a child of the a element. http://www.w3schools.com/jquery/sel_parent_child.asp.
If the elements are not going to be direct descendants, as in your example, remove the greater than sign.
$("a div i")
Allright... this is my first time adding jQuery code to existing one so I tried to do something, it didnt work so i thought i did it wrong, but only mistake was selecting "li" instead of "i" element Solution was to add this line before the last line:
$(this).children('div').children('i').toggleClass("fa-plus-square fa-minus-square");
I'm a newbie so i hope my question will have some logic :)
i wish to add a class "active" to "li" (in this case a portfolio filter item in the page) by clicking on a link from the nav menu.
the "li" is not a part of the nav menu, how do i assign a "li" with a class if the "li" is in the deep tree - it's a whole different part of my site.
the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
<li <--- the place i wish the "active" be added
i have checked other question but couldn't figure out how to implement the specific need.
thanks for the help
You have to create a listener for the link of the menu. In JQuery, to create a listener, you have the 'on' function.
Example :
$("myElement").on("click",function(){});
After that, add an id attribute for the 'li' tag.
For example:
<li id="myLI">
So, when the user will click on the link of the menu, it will go to the listener. And in the listener, you will do :
$("#myLI").addClass("active")
Don't forget to create the css class.
First you have to specify .active in your CSS.
.active {
//add styles here
}
Then using javascript you have to grab #myLI and set class .active to it using onclick event:
var element = document.getElementById("myLI");
element.onclick = function() {
element.setAttribute('class','active');
}
I have 5 a link items in a row, encapsulated within a h4 and the h4 within li element and the li within ul which it's finally nested in a nav element.
At the moment, the role of a (thanks to a very helpful example that I found here) when clicked is to change the content of the divs (that contain images and text).
What I would like to do in addition, is that when you click the link and the content changes, I would like a link to receive the "active" class, which has white color and certain other css attributes.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
the function that swaps the content
<nav id="nav2">
<ul class="tabz">
<li><h4>Szenario 1</h4></li>
<li><h4>Szenario 2</h4></li>
<li><h4>Szenario 3</h4></li>
<li><h4>Szenario 4</h4></li>
<li><h4>Szenario 5</h4></li>
</ul>
</nav>
When the page loads, everything displays correctly. When I click the second link I would like the "active" class to be removed from first link and go to the sencond.
(The css of the active class is just some color and border differences.)
Thank you very much in advance.
Attach handler for those anchor tags by using the attribute starts with selector, since you are having href with same beginning. And by using the $(this) reference set the active class and remove the active class from all of its anchor siblings.
Try,
$('[href^="#tabs"]').click(function(){
$(this).addClass('active');
$(this).closest('.tabz').find('a').not($(this)).removeClass('active');
});
$('[href^="#tabs"]').click(function(e){
$(this).addClass('active').parents('li').siblings().find('a').removeClass('active');
});
With the markup you have, the clicked a element won't have any sibling, but its li parent will, so this code will work as expected, see here : DEMO
I am trying to get a 3rd level menu to automatically expand when its first level parent is expanded. So in the example I have, when you hover over the first item I want the Item 1 submenu to show (like normal) and then also the first submenu under that. Item 2 should also be showing. http://jsfiddle.net/n2Sxc/1/
I have tried to use this code, which is in the jsfiddle.
$("#main-nav li").mouseover(function () {
$("#main-nav li ul li.first ul").show();
});
I have also looked at the api documentation, but it isn't really clear to me how to use expand or focus. I'm not sure if that's even what I want to use.
Focus: http://api.jqueryui.com/menu/#event-focus
Expand: http://api.jqueryui.com/menu/#method-expand
I have also tried this when initiating the menu
$('#main-nav').menu({
focus: function( focus, ui ) {
$("#main-nav li").hover(function (){
$("#main-nav li ul li.first ul").show();
});
}
});
Yes, focus and expand is what you need. You don't need .show().
I am not sure whether your mouseover will not conflict with the normal menu events handling.
For the beginning, to get at least something simple working, a code like below could automatically expand the submenus after menu creation (to simplify the selectors maybe you could add ids to your menu items, I have doubts whether your selectors select what intended):
$("#main-nav").menu()
.menu("focus",null,$("#main-nav > li.first"))
.menu("expand")
.menu("focus",null,$("#main-nav > li.first > ul > li.first"))
.menu("expand");
In the current jquery-ui-1.10.3 + jquery-2.0.3 this code actually fails with some null element access... It is a bug in jquery. I can't find the bug ticket now but I saw that it was already resolved and will be ok in the next release.