When I slideToggle the simple accordian that I have, I would like to change the class of the link element and the .revealBox div that wraps the whole accordion depending on whether the accordion is opened or closed
my jquery is
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText = 'Hide Information';
var hideText = 'Show Information';
var is_visible = false;
$('.collapseLink').append('<span class="dottedBot">' + showText + '</span>');
$('.revealBoxContents').show();
$('a.collapseLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html((!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.revealBoxContents').slideToggle('slow');
// return false so any link destination is not followed
return false;
});
// toggle the bottom link
$('.collapseLink').click(function() {
$(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
$(".collapseLink").html((!is_visible) ? showText : hideText);
$(this).parent('.item').toggleClass('current');
});
});
my Url is
http://satbulsara.com/NSJ-local/eqs1.htm
Thanks,
Sat
You want to use the addClass() function on the element.
http://api.jquery.com/addClass/
You can also do that using toggleClass() as seen on jQuery documentation :
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
return 'happy';
} else {
return 'sad';
}
});
http://api.jquery.com/toggleClass/
You can make use of jquery's addClass() and removeClass() to add and remove classes .
Related
EDIT: I cleaned up the code a bit and narrowed down the problem.
So I'm working on a Wordpress site, and I'm trying to incorporate drop-downs into my menu on mobile, which means I have to use jQuery to assign classes and id's to my already existing elements. I have this code that already works on premade HTML, but fails on dynamically created id's.
Here is the code:
...
var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
console.log(submenus);
submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
submenus.each(function() {
$(this).attr("href", "#m" + menuCount++);
})
var content = submenus.parent().find('ul.sub-menu');
content.addClass('dropdown-content');
content.each(function() {
$(this).attr("id", "m" + contentCount++);
})
}
$(document).on('click', '.dropdown-title', function(e) {
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
$(this).removeClass('d-active');
$(currentAttrValue).slideUp(300).removeClass('d-open');
} else {
$('.dropdown-title').removeClass('d-active');
$('.dropdown-content').slideUp(300).removeClass('d-open');
$(this).addClass('d-active');
console.log($(currentAttrValue));
//THIS LINE FAILS
$(currentAttrValue).slideDown(300).addClass('d-open');
}
e.preventDefault();
});
I've registered the elements with the class dropdown-title using $(document).on(...) but I can't figure out what I need to do to register the elements with the custom ID's. I've tried putting the event callback inside the .each functions, I've tried making custom events to trigger, but none of them will get the 2nd to last line of code to trigger. There's no errors in the console, and when I console log the selector I get this:
[ul#m0.sub-menu.dropdown-content, context: document, selector: "#m0"]
0
:
ul#m0.sub-menu.dropdown-content
context
:
document
length
:
1
selector
:
"#m0"
proto
:
Object[0]
So jQuery knows the element is there, I just can't figure out how to register it...or maybe it's something I'm not thinking of, I don't know.
If you are creating your elements dynamically, you should be assigning the .on 'click' after creating those elements. Just declare the 'on click' callback code you posted after adding the ids and classes instead of when the page loads, so it gets attached to the elements with .dropdown-title class.
Check this jsFiddle: https://jsfiddle.net/6zayouxc/
EDIT: Your edited JS code works... There also might be some problem with your HTML or CSS, are you hiding your submenus? Make sure you are not making them transparent.
You're trying to call a function for a attribute, instead of the element. You probably want $(this).slideDown(300).addClass('d-active'); (also then you don't need $(this).addClass('d-active'); before)
Inside submenus.each loop add your callback listener.
As you are adding the class dropdown-title dynamically, it was not available at dom loading time, that is why event listener was not attached with those elemnts.
var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
console.log(submenus);
submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
submenus.each(function() {
$(this).attr("href", "#m" + menuCount++);
// add callback here
$(this).click( function(e) {
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
$(this).removeClass('d-active');
$(currentAttrValue).slideUp(300).removeClass('d-open');
} else {
$('.dropdown-title').removeClass('d-active');
$('.dropdown-content').slideUp(300).removeClass('d-open');
$(this).addClass('d-active');
console.log($(currentAttrValue));
$(currentAttrValue).slideDown(300).addClass('d-active');
}
e.preventDefault();
});
})
var content = submenus.parent().find('ul.sub-menu');
content.addClass('dropdown-content');
content.each(function() {
$(this).attr("id", "m" + contentCount++);
})
}
Turns out my problem is that jQuery is adding to both the mobile menu and the desktop menu, where the desktop menu is being loaded first when I search for that ID that's the one that jQuery finds. So it turns out I was completely wrong about my suspicions.
I am creating an plugin with wordpress for the portfolio items. Everything works fine . But the issue is when i apply the filter the hover effect stopped working on the cloned items
also available JS FIDDLE
the jquery code is given below i tried
/* Scroll to Top Button */
jQuery(document).ready(function() {
// Animate Box Shadow on some elements
// Add the overlay. We don't need it in HTML so we create it here
// Clone portfolio items to get a second collection for Quicksand plugin
var $portfolioClone = jQuery(".rudra-portfolio").clone(true);
// Attempt to call Quicksand on every click event handler
jQuery(".rudra-portfolio-filter a").click(function(e) {
jQuery(".rudra-portfolio-filter li").removeClass("current");
// Get the class attribute value of the clicked link
var $filterClass = jQuery(this).parent().attr("class");
if ($filterClass == "all") {
var $filteredPortfolio = $portfolioClone.find("li");
} else {
var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
}
// Call quicksand
jQuery("ul.rudra-portfolio").quicksand($filteredPortfolio, {
duration: 500,
easing: 'easeInOutQuad'
});
jQuery(this).parent().addClass("current");
// Prevent the browser jump to the link anchor
e.preventDefault();
})
jQuery(".port-li").click(function() {
jQuery(this).find('.content-wrapper').slideDown();
});
jQuery(".overeffect").mouseover(function() {
jQuery(this).find('.content-wrapper').slideDown();
});
jQuery("#portfolio-grid li").mouseleave(function() {
jQuery('.content-wrapper').slideUp(500);
});
});
hour effect is working fine for first and second time , but after that it stopped working .
Update
I also tried this Jquery clone
solved by me ..
i just need to use this
jQuery(document).on('hover',".overeffect",function(){
jQuery(this).find('.content-wrapper').slideDown();
});
--EDIT--
I have the toggle Button with which slides left and right. The toggle and animation are working fine, but the problem comes when adding more than one instance of toggle button on the same page. When I click on a toggle button, All the toggle buttons are using the same VAR. So if you open one and then click another one, the second one doesn't slide open because it thinks is suppose to close. Where would you put the isChecked var so that it is different for each instance?
js fiddle
http://jsfiddle.net/amQCN/11/
$(document).ready(function() {
var isChecked = false;
$('.toggle-radio-switch').click(function() {
if (isChecked == true) {
$(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150');
isChecked = false;
console.log("isChecked = " + isChecked);
} else {
$(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150');
isChecked = true;
console.log("isChecked = " + isChecked);
};
});
});
radio-switch-slider is positioned on top of the contents and slides back and forth revealing yes or no
<div class="toggle-radio-switch" id="toggle3">
<span>yes</span>
<span>no</span>
<div class="radio-switch-slider"></div>
</div>
Working version incase anyone is wondering:
Ended up just using this instead
$('.toggle-radio-switch').click(function() {
if ($(this).find('.radio-switch-slider').css('margin-left')=="0px"){
$(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150');
} else {
$(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150');
}
});
I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')...
I have a font resizer that needs to be contained in one link. eg. show text link "Larger Type" and switch to text link of "Smaller Type" when clicked. I am not sure why it will toggle the class "plus/minus" but it will not switch the text or call the font resize function after the else statement?
Currently, it works the first click to resize the text and add the minus class but after that it does nothing.
http://jsfiddle.net/infatti/P6SVv/
var targetContainers = $('.two-thirds');
var newLargerSize = 16;
var newSmallerSize = 14;
$('.resize-font a').click(function(){
if ($(this).hasClass('plus')) {
$(targetContainers).css('font-size', newLargerSize);
$(this).text('Smaller Type').toggleClass('minus');
} else {
$(targetContainers).css('font-size', newSmallerSize);
$(this).text('Larger Type').toggleClass('plus');
};
});
Your condition is not calibrated with your toggle.
You check if the a has the class plus, but if it does, you never remove the plus, you remove (or add) the minus.
You should toggle plus always, to remove it when it exists, and add it when it doesn't:
$('.resize-font a').click(function() {
var hasPlus = $(this).hasClass('plus');
$(targetContainers).css('font-size', hasPlus ? newLargerSize : newSmallerSize);
$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus');
});
If you need the minus for styling, you should toggle both, at all times:
$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus minus');
problem is with toggleClass()
please have a look this will solve your problem
http://jsfiddle.net/3w2nG/
Using zepto.js, how can You show X items from a ul, hide the rest and show them
only when the user clicks "show more" Link/button?
10X!
Here's one way to accomplish what you're asking.
$(function() {
$('li').slice(5).toggle();
$('span').click(function() {
$('li').slice(5).toggle();
});
});
The first .slice(5).toggle() functions take all the list items selected, narrow them down to a subset of elements that starts at index 5 through the end. Then it toggles the visible state of the first element it finds in that subset.
We then attach a function to the click event on the span, which is our Show/Hide element. That function is actually just the same as the initial function we ran to hide all the elements past index 5.
Check out this JS Fiddle for a working example. Also, for further reference here are the docs on .slice() and here are the docs on .toggle().
Hope that helps!
Basically there are 2 ways.
Use zepto to toggle a class and use css to define what to hide
/* show only the first 3 list items */
ul.collapsed li:nth-child(n+4) {
display: none;
}
var $list = $(ul.collapsed); // initially the list is collapsed
// use a show-more link to toggle display of remaining items
$("a.show-more").click(function(){
// get the current state of the list by querying the className
var shouldShow = $list.hasClass("collapsed") == true;
$list.toggleClass("collapsed");
// set the link text according to the task (show or hide)
$(this).html(shouldShow ? "Show less" : "Show more");
// its a link, don't follow it
return false;
});
Use zepto "standalone"
var $list = $(ul);
// use the link to set the css properties directly
$("a.show-more").click(function(){
var shouldShow = $list.hasClass("collapsed") == true;
$("li:nth-child(n+4)", $list).css({
"display": shouldShow : "" : "none"
});
$(this).html(shouldShow ? "Show less" : "Show more");
return false;
});