js child class toggle - javascript

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?

Related

Show div on click and hide on next click

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();
});

Jquery Modal on click add class then remove

This bit of code is supposed to add a class and then with a delay remove the div entirely. It just jumps to deleting the div. Any ideas why?
The HTML
<!-- modal conent-->
<div class="modal" id="modal">
<div class="modal-content ">
<h1>Tricks Are 4 Kids</h1>
<p>Ok so my modal doesn't look like this one, but this is it boiled down. Can I write the JS better??? ....</p>
<button href="#" class="close" id="close" >X</button>
</div>
</div>
</div>
<!-- page conent-->
<div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div>
The CSS
.red {background:red;}
The jQuery
$(document).ready( function() {
$( "#close" ).click(function() {
$("#modal").addClass("red").delay(800).queue
$("#modal").remove();
});
Codepen https://codepen.io/Ella33/pen/GjQZRP
$(document).ready( function() {
$( "#close" ).click(function() {
$("#modal").addClass("red");
setTimeout(function() {
$("#modal").remove();
}, 800);
});

Clone and append on click makes multiple elements and toggle not working

I am trying to clone and append elements. after i append i have added a toggle animation. on first click it works fine. after i am getting mutliple elements appended.
as well the animation not working.
here is the html:
<div class="parent hide">
<div class="header">
<h6>Header</h6>
</div>
<div class="content">
<p>paragraph content </p>
</div>
</div>
<div id="content">
</div>
<button>Add</button>
Js :
$('.parent').on('click', '.header', function () {
$(this).find('h6').toggleClass('name').end()
.siblings('.content').slideToggle();
});
$('button').on('click', function () {
var newParent = $('.parent').clone();
$('#content').append(newParent.removeClass('hide'));
});
JSfiddle
UPDATE:
I updated the cloning passing var newParent = $('.parent').clone(true); - animation works!
you should clone only the first element (or the last for that matter):
var newParent = $('.parent:first').clone(true);
EXAMPLE 1
Using .clone(true) seems to fix the animation. Another solution is targeting the parent on click and delegating .parent .header since the cloned .parent is being added to the DOM after the initial load:
$('#content ').on('click', '.parent .header', function () {
instead of
$('.parent').on('click', '.header', function () {
EXAMPLE 2
Cloning an elements means there will be two identical elements (having the same class aswell) afterwards.
Each time you click the button, all elements having the .parent class are cloned and appended to the #content
Regarding the animation:
The appended elements are not known to the DOM, so the .on('click') is not working.
Try to put a wrapper around your .parent elements and then use the following syntax:
HTML
<div class="wrapper">
<div class="parent hide">
<div class="header">
<h6>Header</h6>
</div>
<div class="content">
<p>paragraph content </p>
</div>
</div>
<div id="content">
</div>
</div>
<button>Add</button>
JS
$('.wrapper').on('click', '.parent .header', function(){ [...] });

insertAfter clicked element

I have the following markup;
<div class="model-timeline">
<p>Text</p>
<div class="timeline">
<div class="span-blank-5"></div>
<div class="time-span-1"></div>
<div class="time-span-2"></div>
<div class="time-span-2"></div>
</div>
</div>
<div class="model-timeline">
<p>Text</p>
<div class="timeline">
<div class="span-blank-5"></div>
<div class="time-span-1"></div>
<div class="time-span-2"></div>
<div class="time-span-2"></div>
</div>
</div>
and script;
$('[class*="time-span"]').on('click', function () {
$('.model-detail-panel').insertAfter('.timeline').slideDown('fast', function () {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 500);
});
});
I need to insert a new div 'model-detail-panel' after clicking one of the time-span classes.
This new div should appear after the timeline class and only inside the parent div of the timeline class that was clicked.
The code I have is inserting the div, but its adding it after every timeline class which is not the behaviour I need.
How can I modify my code to target only the clicked parent of the element, hence inserting the div once?
Thanks in advance.
Use
$('.model-detail-panel').insertAfter($(this).parent()) ...
This will insert your panel after the parent of the clicked element.

Javascript - jquery,accordion

<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();
});

Categories