I have this HTML:
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
</div>
Show me next box
Consider that initially only the first box is visible. When I click 'Show me next box' I want the current visible box to be hidden, and the next .boxes on the list to appear.
The only thing that I think it gets close is the .each function, but I shouldn't cycle through all divs just to show one, I think.
$('a').click(function() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
});
Live demo.
$('a').click(function(){
$('.boxes').filter(':visible').hide().next().add('.boxes:first').last().show();
});
Related
I have the following HTML:
<div class="persons">
<div class="per1"></div>
<div class="per2"></div>
<div class="per3"></div>
<div class="per4"></div>
<div class="per5"></div>
<div class="per6"></div>
<div class="per7"></div>
<div class="per8"></div>
<div class="per9"></div>
<div class="per10"></div>
</div>
<a id="add-person" href="#" class="button brand">Add Person Involved</a>
All but the first div (per1) are hidden by default.
Then with the following JS I can show the next div if a person clicks the button.
$("#add-person").click(function(){
if ($(".persons div:visible").next().length != 0){
$(".persons div:visible").next().slideDown('slow');
}
return false;
});
This works but my issue is once the 10th div becomes visible I want the Add Person Involved button to be hidden.
I tried adding the following code to the above click function but it doesn't work:
if ( $(".persons div:visible").length === 10){
$("#add-person").hide();
}
How do I hide the button once the 10th div (aka class="per10") becomes visible?
you can check for :hidden after visible the div
if ( $(".persons div:hidden").length == 0){
$("#add-person").hide();
}
and you can try to use :last() visible and check for is("hidden") for the next div
$("#add-person").click(function(){
if ($(".persons div:visible:last").next().is(':hidden')){
$(".persons div:visible:last").next().slideDown('slow' , function(){
if ( $(".persons div:hidden").length == 0){
$("#add-person").hide();
}
});
}
});
Working Demo
and instead of using in css
.per2, .per3, .per4, .per5, .per6, .per7, .per8, .per9, .per10{
display:none;
}
you can use
.persons > div{
display : none;
}
or
.persons > div[class^="per"]{ // this mean div with class starts with per
display : none;
}
I have a simple script that toggles the visability of two divs:
<script type='text/javascript'>
$(window).load(function(){
function toggle_contents() {
$('#page1').toggle();
$('#page2').toggle();
setTimeout(function(){
toggle_contents()
}, 25000)
}
toggle_contents();
});
</script>
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
</div>
It works great but I can not figure out how to add more divs to the mix.
http://jsfiddle.net/mxwv85px/1/
Any help is much appreciated...
To cycle through a set of divs you could use a class on the active div, and use next to move on each iteration. Something like this:
function toggle_contents() {
var $active = $('#container .active');
if ($active.length && $active.next().length) {
$active.hide().removeClass('active').next().show().addClass('active');
}
else {
$('.active').hide();
$('#container div:first').show().addClass('active');
}
setTimeout(toggle_contents, 3000)
}
toggle_contents();
Updated fiddle
.toggle() means the div's are toggled between hidden and displayed. I would suggest using .hide() and .show() instead, as this gives you more control about what content you want to display or not. However, the downside is you would need a code that has much more lines to it. Give me a second while I try to make such a thing for you.
Currently you can only have 2 divs, because the .toggle() function can only have 2 values, which means a third div will have the same value as another div, causing it to be either visible or hidden while another div is as well.
The code provided in this answer by #Rory McCrossan is already working, so I'll stop trying to program it myself:
https://stackoverflow.com/a/27447139/4274852
You could cycle through the selected elements and show only one each call
var page=0;
function toggle_contents() {
$('.page').hide();
var array = $('.page').toArray();
$(array[page]).show();
page=++page%array.length;
setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();
http://jsfiddle.net/mxwv85px/9/
First of all, put timer out of toggle_contents function. Secondly, add to divs common class, cache them and operate with variable-cache
$(window).load(function(){
var divs = $('.some-class');
function toggle_contents() {
divs.toggle();
}
setTimeout(function(){
toggle_contents()
}, 25000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class">
</div>
<div class="some-class">
</div>
<div class="some-class">
</div>
You can do this
http://jsfiddle.net/mxwv85px/13/
The code
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
<div id="page3" style="display:none;">This is page 3 contents.</div>
<div id="page4" style="display:none;">This is page 4 contents.</div>
<div id="page5" style="display:none;">This is page 5 contents.</div>
function toggle_contents() {
var items = $('#container div');
for(var i= 0; i < items.length; i++)
{
if($(items[i]).is(":visible")) {
$(items[i]).hide();
i + 1 == items.length ? $(items[0]).show() : $(items[i+1]).show();
break;
}
}
setTimeout(function(){ toggle_contents() }, 500)
}
toggle_contents();
To add more divs, you can use .append, for example:
$('#container').append('<div id="page3">This is page 3 contents</div>');
I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});
Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});
Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/
Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example
I am horrible at explaining on what I want, but ill give it a shot.
Ok here is html on the left side.
<div></div>
<div></div>
<div></div>
<div></div>
Here is what is outputting on the right side.
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
I am trying to make it so when you click the first div on the left, the first div on the right appears, and when u click second div on the left, the second div on the right appears while all the other divs on the right are hidden again and so on. I know you can do it with the .index() in jQuery, but I was wondering if i can get some help on how to do it. Thanks!
Something like this?
Markup
<div class="left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="right">
<div class="block">Result 1</div>
<div class="block">Result 2</div>
<div class="block">Result 3</div>
<div class="block">Result 4</div>
</div>
JS
$(function(){
$('.left > div').on('click', function(){
//Just show the respective block div based on the clicked index and hide its siblings that are visible.
$('.block').eq($(this).index()).show().siblings('.block:visible').hide();
});
});
Demo
With a little slide Effect
$(function () {
$('.block').eq(0).show();
$('.left > div').on('click', function () {
var elemToShow = $('.block').eq($(this).index()); //Get the element to show
$('.block:visible').stop().slideUp(1000, function () { // slide up the visible block div
elemToShow.stop().slideDown(1000); // once the animation finishes shidedown the element to show
});
});
});
Demo Slide effect
Demo Fade effect
Assuming you'll put a left class on those left divs:
var $blocks = $('.block'),
$left = $('.left');
$('.left').click(function () {
$blocks.hide().eq( $left.index(this) ).show();
});
Here's the fiddle: http://jsfiddle.net/YddrP/
Well, you first have to detect the click on the elements on the left. In the callback function, you'll have to find out the index of the clicked div and then show() the one on the right side whose index matches the number.
Let's say you have the left divs inside a container with the class left and the ones on the right inside right:
$('.left').on('click', 'div', function(){ //bind the click event to the left divs
$('.right div') // select all the divs inside .right
.hide() // hide all the divs
.eq( $(this).index() ) // select the one that matches the clicked index
.show(); // show it
});
Here's a demo.
Here is the documentation for on().
Here is the documentation for eq().
Yes, you can try .index() and :eq()
.index() returns the numeric index of an element, while :eq() returns the element by a numeric index.
Assume the left divs are inside a outer div with class 'left', and right divs inside 'right'
$('.left div').click(function () {
$('.right div').hide();
var i = $('.left div').index(this);
$('.right div:eq(' + i + ')').show()
});
i use a simple bit of code to make a div collapse, this is it:
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none")?"":"none";
}
//-->
</script>
what code do i add to make it recognise when one div is open an collapse the previous div?here's the link I'd use:
Link 1
<div id="div1" width="300px" style="display:none"></div>
Any ideas?
This is something jQuery works really well for. Here is a working example in jsfiddle.
http://jsfiddle.net/mrtsherman/uqnZE/
Example html
<div class="category">A
<div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
<div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
<div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>
And the code:
$(".category").click( function() {
$(".artists").hide();
$(this).children(".artists").show();
});
Basically what it does is hide all the divs that contain artists, then shows the div for the one you clicked on. Really simple.
If you were willing to use jQuery, the selector of your interest is something along the lines of
$('div#parent-container > div').filter(':visible');
For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)
Something to mess with:
$(function(){
//Reference Object
var $divs = $('div > div');
//Buffer for selected variable
var $selected = 0;
//Show first
$divs.eq(0).show();
$('#next').click(function(){
//Update selected var
$selected = $divs.filter(':visible');
//Save next to variable
var $next = $selected.next();
//Change Visibility
toggle($next);
//Prevent Default
return false;
});
$('#prev').click(function(){
$selected = $divs.filter(':visible');
var $prev = $selected.prev();
toggle($prev);
return false;
});
$('a').click(function(){
$selected = $divs.filter(':visible');
var selector = $(this).attr('href');
if(selector == '#') return false;
toggle( $( selector ) );
return false;
});
var toggle = function($toggle){
if(!$toggle.length) return false;
$selected.hide();
$toggle.show();
}
});
<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Show Item Four
<div>
<div id="item-1">One</div>
<div id="item-2">Two</div>
<div id="item-3">Three</div>
<div id="item-4">Four</div>
<div id="item-5">Five</div
<div id="item-6">Six</div>
</div>
div > div {
font-size:5em;
width:auto;
text-align:center;
padding:20px 0;
display:none;
}