Trying to append PREVIOUS/NEXT function in my website. When the next button is clicked, I want the current tab move to the right next to it.
<div class="nav">
<div id="prev" class="previous" style="display:none">
Prvious
</div>
<div id="prevempty">
</div>
<div id="crumbs">
<ul>
<li id="li1" class="current">One</li>
<li id="li2"><a id="li2A" href="#2" value="two" onclick="MenuFunction(2);">Two</a></li>
<li id="li3">Three</li>
<li id="li4">Four</li>
<li id="li5">Five</li>
</ul>
</div>
<div id="nxt" class="next">
Next
</div>
</div>
$(document).ready(function(){
$("#nxt").click(function(){
$("#prev").show();
$(".current").next().addClass("current").end().removeClass("current");
if($(".current").attr("id") == "li5")
{
$("#nxt").hide();
}
});
$("#prev").click(function(){
$("#nxt").show();
$(".current").prev().addClass("current").end().removeClass("current");
if($(".current").attr("id") == "li1")
{
$("#prev").hide();
}
});
});
Related
I have a div with 3 divs inside it each of the inner divs have a class of content and one has a class of current. I was trying to show only one .content at a time and just have a next button that hides the div and removes the .current class and adds it to the next one. It all works fine but when I get to the end of the divs. I want it to just circle back to the first one. The following code doesn't do that. The first one shows but the next button stops working after that:
js:
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').first().slideDown().addClass('current').end();
}
})
})
HTML:
<div id="holder">
<a class="btn btn-warning next" id="next">next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->
What your $('.content').first().slideDown().addClass('current').end(); does is it'll show the first element and add the current class to it. Change your script to this
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').slideDown();
$('.content').first().addClass('current');
}
});
});
and it will work. Here is a example fiddle. Hope this helps you.
var $ = jQuery
$( document ).ready( function() {
var i = 1;
$('#next').click(function(){
++i;
$('.content.current').removeClass("current").slideUp();
$(".content:nth-child("+i+")").addClass("current").slideDown();
if(i == 3) i=0;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<a class="btn btn-warning next" id="next">next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->
It's very easy if you insist to do it with JS :
$( document ).ready( function() {
var i = 1;
$('#next').click(function(){
++i;
$('.content.current').removeClass("current").slideUp();
$(".content:nth-child("+i+")").addClass("current");
if(i == 3) i=0;
})
})
but better option is BOOTSTRAP which I guess you are using.
you can find it here: Collapse Bootstrap
I have this JS fiddle:
https://jsfiddle.net/zczwjdrw/7/
Menu 1:
When clicking on AAA it opens a menu.
When clicking on BBB it opens an other menu and removes AAAs style back to default. When clicking on BBB again it closes the submenu but doesn't change back to default. How do I solve this?
Menu 2:
When clicking on a sub menu option - it colors it. when clicking on an other option - it doesn't remove the class from the previous element. and you can continue coloring all submenu options. What can be the solution for this? I have used the same functionality on jQuery as .sidebar1.
jQuery:
$('.sidebar1 a').click(function(){
$(this).addClass('active-sb1').siblings().removeClass('active-sb1');
});
$('.sidebar2 a').click(function(){
$(this).addClass('active-sb2').siblings().removeClass('active-sb2');
});
HTML:
<div class="main-wrapper">
<div class="sidebar1">
<a href="ssb1" class="category" id="sb1" onclick="return false">
<div>AAA</div>
</a>
<a href="ssb2" class="category" id="sb2" onclick="return false">
<div>BBB</div>
</a>
<a href="ssb3" class="category" id="sb3" onclick="return false">
<div>CCC</div>
</a>
</div>
<div class="sidebar2" id="ssb1" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
AAAAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb2" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb3" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
CCCCCCCCC
</li>
<li>
CCCCCCCC
</li>
<li>
CCCCCCCC
</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="user-bar">
</div>
<div class="content">
</div>
</div>
</div>
In .sidebar2 your <a> elements are inside a <li> so the <a> has no other siblings. But instead the parent <li> has siblings.
So, you could try something like this:
$('.sidebar2 a').click(function() {
var e = $(this);
e.addClass('active-sb2');
e.parent().siblings().children().removeClass('active-sb2');
});
And for your first problem, you could test if the element already has the class active-sb1, which means that the element is open, in which case you remove the class.
$('.sidebar1 > a').click(function() {
var e = $(this);
if (e.hasClass("active-sb1")) {
e.removeClass('active-sb1');
} else {
e.addClass('active-sb1');
}
e.siblings().removeClass('active-sb1');
});
Updated Fiddle link
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
I'm trying to display a div when an item with a class name the same as the hidden div's id is clicked.
The problem is when I click it reveals all of them instead of the particular one I'm clicking on.
This is my code so far:
$("#mixers").on("click", ".clear-tile", function() {
$("#mixers li").each(function() {
$('#' + $(this).attr('class')).removeClass('display-hide');
});
});
.display-hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span></li>
<li class="two"><span class="clear-tile">Show Two</span></li>
<li class="three"><span class="clear-tile">Show Three</span></li>
</ul>
<div id="one" class="display-hide"><p>I'm One</p></div>
<div id="two" class="display-hide"><p>I'm Two</p></div>
<div id="three" class="display-hide"><p>I'm Three</p></div>
Dont iterate over them with each, that will show them all
Use parent() to traverse up to the li with the class identifier
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent('li').attr('class')).removeClass('display-hide');
});
.display-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span>
</li>
<li class="two"><span class="clear-tile">Show Two</span>
</li>
<li class="three"><span class="clear-tile">Show Three</span>
</li>
</ul>
<div id="one" class="display-hide">
<p>I'm One</p>
</div>
<div id="two" class="display-hide">
<p>I'm Two</p>
</div>
<div id="three" class="display-hide">
<p>I'm Three</p>
</div>
You need to use:
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent().attr('class'))
.toggleClass('display-hide')
.siblings('div')
.addClass('display-hide');
});
Working Demo
i try to add jQuery script that will toggle my footer columns, my problem is how I can make to stop toggling all items. Now when someone click on H4 tags all H4 tags are toggle together.
HTML:
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery SCRIPT
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
else {
jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
}
});
You could also try the following code:
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer-cols h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
}
else {
jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
}
});
The problem with your selector is that with
parents('.footer-cols')
You basically select
<div class="row footer-cols"></div>
element on top. Thus
find('.footer-cols-content')
selects all child elements in it resulting all of them to slideToggle()
on the click handler change .parents('.footer-cols') for .parents('.col-sm-4')
You will need to add content to the span to give the user something to click
This one changes the plus/minus and hides other content
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) $(this).append('<span class="toggle" />');
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
To add the span on the fly:
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
.footer-cols-content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information </h4>
<div class="footer-cols-content">
<ul>
<li>About Us
</li>
<li>Customer Service
</li>
<li>Privacy Policy
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us <span class="toggle">+</span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns
</li>
<li>Secure Shopping
</li>
<li>International Shipping
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am not sure why are you appending span class but If I am not worng only slide toggle should do the work that you intend to do.
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The above code will work only when the footer-cols-content div is always next to h4. To avoid as such you can use parent().
jQuery('.footer h4').on("click", function(){
$(this).parent().find('footer-cols-content').slideToggle();
});