I want to show information based on the item that it is clicked on.
I have some jquery code that works, but not when there are multiple div's in a div.
Here, the first part is what I want, the second part doesn't work because there are div's in the main div. hope that makes sense. How do i make it work?
I think it has something to do with :
$("#parent2").find("div:eq('" + i + "')").show().siblings().hide();
Fiddle
You have to toggle direct descendants, if you just find('div') it will find nested too.
So you can do either this:
$("#parent2 > div:eq('" + i + "')").show().siblings().hide();
or this:
$("#parent2").children("div:eq('" + i + "')").show().siblings().hide();
You need to use children() instead of .find() and .index(element) can be used to get index of anchor element to be displayed.
$(document).ready(function() {
$('#div1, #div2, #div3, #div4').hide();
$('#div5, #div6, #div7, #div8').hide();
$(".firstpart a").click(function() {
$("#parent1").children("div").eq($(".firstpart a").index(this)).show().siblings().hide();
});
$(".secondpart a").click(function() {
$("#parent2").children("div").eq($(".secondpart a").index(this)).show().siblings().hide();
});
});
Fiddle
Additionally, You don't need .each() to bind event handler.
https://jsfiddle.net/5yyrojsq/4/ You should try to use declarative JS and use classes instead of ID to match elements.
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1" class="child_div">hello1</div>
<div id="div2" class="child_div">hello2</div>
<div id="div3" class="child_div">hello3</div>
<div id="div4" class="child_div">hello4</div>
</div>
and the JS
$(document).ready(function(){
$('.child_div').hide();
$(".btn").click(
function () {
$('.child_div').hide();
var the_div_id_to_show = $(this).attr("data-show");
$("#" + the_div_id_to_show).show("slow");
}
);
});
I have simplified the problem to show the general principle as opposed to the specific answer.
You should try doing a toggle() instead of show/hide and then do that on click, like this:
$(this).on('click', function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
)};
Try this ;)
Used a class with div to access them in eq()
$(document).ready(function() {
var $parent1 = $("#parent1");
var $parent2 = $("#parent2");
$(".firstpart a").each(function(i) {
$(this).click(function() {
$('.item:visible', $parent1).hide();
$parent1.find("div:eq('" + i + "')").show();
});
});
$(".secondpart a").each(function(i) {
$(this).click(function() {
$('.item:visible', $parent2).hide();
$parent2.find("div.item:eq('" + i + "')").show();
});
});
});
.item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1" class="item">hello1</div>
<div id="div2" class="item">hello2</div>
<div id="div3" class="item">hello3</div>
<div id="div4" class="item">hello4</div>
</div>
<br>
<br>
<br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2">
<div id="div5" class="item">
<div class="row5">hello5</div>
</div>
<div id="div6" class="item">
<div class="row6">hello6</div>
</div>
<div id="div7" class="item">
<div class="row7">hello7</div>
</div>
<div id="div8" class="item">
<div class="row8">hello8</div>
</div>
</div>
I would change this to make your code more accesible and make use of the anchors href:
// probably want to change this to target a class rather than all anchors
$("a").click(function(e) {
e.preventDefault(); // stop default action of anchor
$($(this).attr('href')).show().siblings().hide(); // show the targetted div and hide it's siblings
});
.parent > div {display:none;} /*start divs hidden*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
show div1 <!-- give anchors href of the div they are targeting, maybe a class too -->
show div2
show div3
show div4
</div>
<div id="parent1" class="parent">
<div id="div1">hello1</div>
<div id="div2">hello2</div>
<div id="div3">hello3</div>
<div id="div4">hello4</div>
</div>
<br><br><br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2" class="parent">
<div id="div5"><div class="row5">hello5</div></div>
<div id="div6"><div class="row6">hello6</div></div>
<div id="div7"><div class="row7">hello7</div></div>
<div id="div8"><div class="row8">hello8</div></div>
</div>
Updated your same piece of code using toggle() instead of show() and hide()
HTML
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1">hello1</div>
<div id="div2">hello2</div>
<div id="div3">hello3</div>
<div id="div4">hello4</div>
</div>
<br><br><br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2">
<div id="div5">hello5</div>
<div id="div6">hello6</div>
<div id="div7">hello7</div>
<div id="div8">hello8</div>
</div>
jQuery
$(document).ready(function(){
$('#div1, #div2, #div3, #div4').toggle();
$(".firstpart a").each(function(i) {
$(this).click(function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
});
});
});
$(document).ready(function(){
$('#div5, #div6, #div7, #div8').toggle();
$(".secondpart a").each(function(i) {
$(this).click(function() {
$("#parent2").find("div:eq('" + i + "')").toggle().siblings();
});
});
});
Fiddle
I think this will work for your 'parent2' div:
$("#parent2").children("div:eq('" + (i) + "')").show().siblings().hide();
});
Related
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??
Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});
Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/
Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});
I want to have a function that will fadeIn() a div with class image on hover on another class. However there are multiple divs from each class and would like to have each div correspond to another. I havet hought about using index() to get the inex number of each class and then equal each index number to only display the one corresponding.
To clarify I'll express it as code:
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
The idea is that when hovering the first woot div it will display the first image div, if hovering the second one it will display the second one and the same process for the rest.
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
//use css selection in jquery
$('container span:nth-child(1))
$('container span:nth-child(2))
$('container span:nth-child(3))
$('container span:nth-child(4))
I hope this will help you.
Try the code below:
$(document).ready(function() {
$(".woot").hover(
function() {
$(".image:eq(" + $(this).index() + ")").show();
},
function() {
$(".image:eq(" + $(this).index() + ")").hide();
}
);
});
.woot {
width: 100px;
height: 100px;
background-color: black;
}
.image {
width: 100px;
height: 100px;
background-color: blue;
display: none;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
</div>
With this solution, you got to set ALL the .img_container div to display:none.
CSS
.img_container div{display:none;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).show();
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).hide();
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/.
With this solution you got to set ALL the .img_container div to visibility:hidden.
CSS
.img_container div{visibility:hidden;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','visible');
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','hidden');
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/1/.
How would you toggle the class of an inner div? example:
html:
<div class="masonry">
<div class="item">
<div class="item-content">1
<div class="item-more-content">1+</div>
</div>
</div>
<div class="item">
<div class="item-content">2</div>
</div>
</div>
javascript:
$( function() {
var $container = $('.masonry').masonry({
columnWidth: 60
});
$container.on( 'click', '.item-content', function() {
$( this ).parent('.item').toggleClass('is-expanded');
$( this ).children('.item-more-content').toggleClass('iz-expanded');
$container.masonry();
});
});
.parent works, .children does not.
How to toggle css class of child div, "item-more-content"?
This works fine for me (I would comment but don't have enough points yet). Are you sure you want to toggle class 'iz-expanded' and not 'is-expanded' for '.item-more-content'? - typo?
I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?
You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.
You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});