I'm trying to make a sidebar that when clicked it (aside li) slides down the section paragraph (section p) with the same class.
var $asideGet = $('aside li').click(function(){
$(this).each(function(){
$(this).attr('class');
});
});
var $sectionGet = $('section p').click(function(){
$(this).each(function(){
$(this).attr('class');
});
});
if($asideGet == $sectionGet){
$asideGet.click(function(){
$sectionGet.slideToggle();
});
};
I reviwed the code and got something like this:
Oops... But when I click the aside li, it slides down all the section p, and I just want to slide down the section p with the same class as aside li does.
var $sectionP = $('section p');
$sectionP.hide();
var $asideLi = $('aside li');
function comparing(){
$asideLi.click(function(){
$(this).each(function(){
var $asideClass = $(this).attr('class');
if($sectionP.hasClass($asideClass)){
$sectionP.slideToggle();
};
}); //each function
}); //click function
};
Related
Can anyone tell me why this is not working corectly?
I want a function that will remove list item when I click on it - instead it is removing the whole list.
$(document).ready(function(){
$( "#add-tag" ).on("click", function(x) {
var tag = $("#new-tag").val();
$("#galleries div:first-child").clone().appendTo("#galleries");
$("#galleries-list").append('<li>' + tag + ' gallery: remove</li>');
$("#new-tag").removeAttr("value");
x.preventDefault();
});
$("#galleries-list li a").on("click", function(x) {
var elem = $(this);
$(elem).remove();
});
});
make it
$("#galleries-list li a").on("click", function(x) {
var elem = $(this);
elem.parent().remove(); //since you want to remove the li on click of a
});
it was already a jquery object, you didn't have to make it again.
Working Example: https://jsfiddle.net/Twisty/88t09ma8/2/
JQuery
$(document).ready(function() {
$("#add-tag").on("click", function(x) {
x.preventDefault(); // Keep form from submitting
var tag = $("#new-tag").val();
$("#galleries div:first-child").clone().appendTo("#galleries");
$("#galleries-list").append('<li>' + tag + ' gallery: remove</li>');
});
$(document).on("click", "ul#galleries-list li a", function(x) {
$("#new-tag").val("");
$(this).parent("li").remove();
return false;
});
});
The .on() was not hooking to the dynamically created link, so I had to select it more specifically. Also tag was not defined.
I have a code snippet that shows a div once you click the menu item, there are different divs on this space and what the menu does is hide the one that was there before and show the new one, the problem is when I click on the same menu item it shows the current div again and I want to stop that from happening, it should only show the animation if it's not the current one, if it is nothing should happen.
Here is the code snippet:
var curPage="";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide("slide");
}
curPage=$(this).data("page");
$("#"+curPage).show("slide");
});
And here is a demo of how it's occuring now: https://jsfiddle.net/Lfsvc1ta/
Just add an additional check to see whether curPage is the same as the clicked page.
var curPage;
$("#menu a").click(function () {
var page = $(this).data("page");
if (curPage && page != curPage) {
$("#" + curPage).stop().hide("slide");
}
$("#" + page).stop().show("slide");
curPage = page;
});
Demo: Fiddle
You have to check what the before page was, adding a variable.
var curPage="";
$("#menu a").click(function() {
var page=$(this).data("page");
if (curPage!=page && curPage.length) {
$("#"+curPage).hide("slide");
curPage=$(this).data("page");
}
$("#"+curPage).show("slide");
});
Like this fiddle https://jsfiddle.net/7b1wh70h/
Check what data-page is clicked first bro.
var curPage="";
$("#menu a").click(function() {
var newPage = $(this).data("page");
if (newPage !== curPage) {
$("#"+curPage).hide("slide");
$("#"+newPage).show("slide");
curPage = newPage;
}
});
JSFiddle
http://jsfiddle.net/5rkrq4bw/strong text
JQuery Code
// Side Menu Starts
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
if(!$(this).hasClass('Active')) {
if(!$(this).parent().parent().hasClass('Active') && $(this).next().hasClass('sub-menu')) {
$(this).next().slideToggle();
$(this).addClass('Active');
} else {
$('.SideNav .Menu li ul').slideUp();
$(this).next().slideToggle();
$('.SideNav .Menu a.MenuDrop').removeClass('Active');
$(this).addClass('Active');
}
}
});
//Side Menu Ends
The Problem
Trying to integrate multiple tiers I am finding the problem of only being able to have one open at a time and checking to see if any others are open to close them.
What should happen
Demo
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Explanation
Only one 'Category' to be expanded at a time
Only one 'Sub-Cat' inside to be expanded at a time
Adding / removing of 'Active' class.
Resolved: http://jsfiddle.net/wo4sj4pt/
JQuery Code:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = $('.Active');
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
if (!effect) {
$(el)
.toggleClass('active')
.parent('li')
.siblings()
.find('a')
.removeClass('active')
.parent('li')
.children('ul, div')
.slideUp('fast');
}
$(el)
.siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
Usage:
Link to JQuery and the above script
Make a multi-level list
Give your list a class/ID name such as '.SideNav'
Tell the script this is your accordion $('.SideNav').accordion();
http://jsfiddle.net/sabithpocker/5rkrq4bw/2/
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
console.log(this);
var subMenuToExpand = $('ul.sub-menu', $(this).parent());
var otherVisibleSubMenu = $('ul.sub-menu:visible', $(this).parents('.Menu'));
otherVisibleSubMenu.hide();
subMenuToExpand.show();
});
$('.SideNav .Menu a.MenuDrop').click(function(event){
$('ul.sub-menu:visible', $(this).parents('.Menu')).slideUp(50);
$('ul.sub-menu', $(this).parent()).slideDown();
});
I have two similar functions performing a responsive menu toggle via a handle on the page, see the code:
//responsive main navigation
$(function() {
var pull = $('#pull');
menu = $('.main-nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle('fast');
});
});
//responsive blog navigation
$(function() {
var toggle = $('#toggle-handle');
sidebar = $('.blog-sidebar-wrap');
sidebarHeight = sidebar.height();
$(toggle).on('click', function(e) {
e.preventDefault();
sidebar.slideToggle('fast');
});
});
My question is how can I write this so that I'm not repeating the same kind of procedure (function). Do i set up a single function and pass in the parameters? Help mostly appreciated, jQuery/Javascript beginner here!
Try
//a function that creates a slide based menu
function slideMenu(ctrl, target){
ctrl.on('click', function(e) {
e.preventDefault();
target.slideToggle('fast');
});
}
//responsive main navigation
$(function() {
var pull = $('#pull');
menu = $('.main-nav ul');
menuHeight = menu.height();
slideMenu(pull, menu)
});
//responsive blog navigation
$(function() {
var toggle = $('#toggle-handle');
sidebar = $('.blog-sidebar-wrap');
sidebarHeight = sidebar.height();
slideMenu(toggle, sidebar)
});
$(function() {
effectdemo("#pull",'.main-nav ul');
effectdemo('#toggle-handle','.blog-sidebar-wrap');
});
function effectdemo(starter,sliderconatiner)
{
var toggle = $(starter);
sidebar = $(sliderconatiner);
sidebarHeight = sidebar.height();
$(toggle).on('click', function(e) {
e.preventDefault();
sidebar.slideToggle('fast');
});
}
$('.tabbed-block .tab-content:first').show();
$('.tabbed-block ol li:first').addClass('active');
$('.tabbed-block ol li a').click(function () {
$('.tabbed-block ol li').removeClass('active');
$(this).parent().addClass('active');
var a = $(this).attr('href');
$('.tabbed-block .tab-content').hide();
$(a).show();
return false;
});
.. works great, but not if used more than once of the same page, interferes with each other. What should I change?
Thanks!
This should work. Although, why aren't you just using jQuery UI Tabs?
$('.tabbed-block').each(function(){
var $block = $(this);
$block.find('.tab-content:first').show();
$block.find('ol li:first').addClass('active');
$block.find('ol li a').click(function () {
var $link = $(this);
$link.closest('ol').find('li a').removeClass('active');
$link.parent().addClass('active');
var a = $link.attr('href');
$link.closest('.tabbed-block').find('.tab-content').hide();
$(a).show();
return false;
});
});