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
Related
I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.
Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.
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 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();
});
I am trying to develop a very simple jquery tab where I would have the flexibility to add multiple tab content areas in the page. I can make a single tab work..but when i am trying to make it more generic where I am saying I will increase the number of contents by just increment the wrapper by naming the class like container_1, container_2...etc
This is what I have so far which is as obvious as it might be is not working
$('<li class="spacer"></li>').insertAfter('.tabs li');
$('.tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
for (var i = 0; i <= 20; i++) {
$('.container_[i] .tabs li a').click(function () {
var title = $(this).attr('id');
if ($(this).hasClass('inactive')) {
$('.tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' + title + 'Content').show();
}
});
}
here is my markup
<div class="container_1">
<ul class="tabs">
<li><a id="tab1">soum</a>
</li>
<li><a id="tab2">sherry</a>
</li>
<li><a id="tab3">neighbor cat</a>
</li>
</ul>
<div class="container" id="tab1Content">Soum's content</div>
<div class="container" id="tab2Content">Sherry's content</div>
<div class="container" id="tab3Content">neighbor cat's content</div>
</div>
<div class="container_2">
<ul class="tabs">
<li><a id="tab1">Freddy</a>
</li>
<li><a id="tab2">Teddy</a>
</li>
<li><a id="tab3">Brady</a>
</li>
</ul>
<div class="container" id="tab4Content">Freddy's content</div>
<div class="container" id="tab5Content">Teddy's content</div>
<div class="container" id="tab6Content">Brady's content</div>
</div>
Here is my fiddle
http://jsfiddle.net/sghoush1/LF4rp/17/
You are over complicating things. With this setup you can actually have the content div use a class instead of an id but I did not change that part because I thought maybe you are using IDs for a reason
http://jsfiddle.net/LF4rp/18/
$('.containers .tabs li a').click(function () {
var title = $(this).attr('id');
var parent = $(this).closest('.containers');
parent.find('.active').removeClass('active');
$(this).addClass('active');
parent.find('#' + title + 'Content').addClass('active');
});
HTML
<div class="container_1 containers">
<ul class="tabs">
<li><a id="tab1">soum</a>
</li>
<li><a id="tab2">sherry</a>
</li>
<li><a id="tab3">neighbor cat</a>
</li>
</ul>
<div class="container" id="tab1Content">Soum's content</div>
<div class="container" id="tab2Content">Sherry's content</div>
<div class="container" id="tab3Content">neighbor cat's content</div>
</div>
<div class="container_2 containers">
<ul class="tabs">
<li><a id="tab4">Freddy</a>
</li>
<li><a id="tab5">Teddy</a>
</li>
<li><a id="tab6">Brady</a>
</li>
</ul>
<div class="container" id="tab4Content">Freddy's content</div>
<div class="container" id="tab5Content">Teddy's content</div>
<div class="container" id="tab6Content">Brady's content</div>
</div>
CSS
.container {
display: none;
}
.container.active {
display: block;
}
to open the containers with jquery you can do
$('.containers .tabs li:first-child a').addClass('active');
$('.containers').each(function() {
$(this).find('.container:first').addClass('active');
});
http://jsfiddle.net/LF4rp/19/
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();
}
});
});