I'm trying to create a box that is created without IDs.
I mean a box that slide out when I press on a button (also without IDs) and every other "moreinfo" text should not slide down.
Here is a example where I use IDs.
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){ //Only a smooth scroll funtion
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('#box1_more_btn').click(function() {
if($('#box1_more').css('display') == 'none') {
$('#box1_more_btn').text("less");
$('#box1_more').slideDown(400);
} else {
$('#box1_more_btn').text("more");
$('#box1_more').slideUp(400);
}
});
$('#box2_more_btn').click(function() {
if($('#box2_more').css('display') == 'none') {
$('#box2_more_btn').text("less");
$('#box2_more').slideDown(400);
} else {
$('#box2_more_btn').text("more");
$('#box2_more').slideUp(400);
}
});
.moreinfo {
display:none;
}
#box_1 {
color: black;
background-color: #F2F2F2;
}
#box1_more {
background-color: rgba(0,0,0,0.008)
}
#box_2 {
color: black;
background-color: #F2F2F2;
}
#box2_more {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div id="box_1" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span id="box1_more_btn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo" id="box1_more">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br /><br /><br />
<div id="box_2" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
Second box ... more<!-- This Button should also rename--> !
</p>
</div>
</div>
</div>
<div id="box2_more" class="container moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the second more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-2 end-->
</div>
</body>
So I imagine it without IDs.
I tried that, but do not know how to go
This is my attemp without using IDs:
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('.morebtn').click(function() {
if($('.moreinfo').css('display') == 'none') {
$('.morebtn').html(' less '); // Is it possible too, that the window scroll down to "this" div?
$('.box_moreinfo').slideDown(400);
} else {
$('.morebtn').html(' more ');
$('.box_moreinfo').slideUp(400);
}
});
.moreinfo {
display:none;
}
.box {
color: black;
background-color: #F2F2F2;
}
.box_moreinfo {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br />Now, both boxes slideOut on click...<br /><br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div><!-- BOX-2 end-->
</div>
</body>
Just looking at your markup you've made life quite difficult for yourself!
If this were something I was doing I'd make the relationship more explicit in the HTML:
<section class="has-more-info">
<h1>Header</h1>
<p>
Text here...
</p>
<button class="show-more-info">Show more</button>
<div class="more-info hidden">
<h3>More Info</h3>
<p>This is the first more Info box</p>
</div>
</section>
Then you could use:
$('.has-more-info').each( function() {
$(this).find('.show-more-info').click( function(e) {
e.preventDefault();
$(this).siblings('.more-info').slideToggle();
});
});
You need to style the .hidden class as display:none; initially, or onload so as to not impede non-JS users.
I haven't tested this but the concept should get you going.
Related
I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.
this is my flip cards
<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
this is my script for hide/show button
<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
i hope you can help me
I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.
Welcome to stackoverflow.
According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)
Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)
So we need to use a class instead of newpost id to target those elements.
Change the HTML to the following content — by formatting the code and fixing those errors:
<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>
Script:
This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.
<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>
Learn about HTML errors:
Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.
According to your Question , What I Understand you want something like this:=
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
http://jsfiddle.net/Rwx7P/3/
You have two blocks with same ID (button and newpost), it must be always diffrent on one page.
function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
In a dom which has many of the blocks like the one below, I'd like to get name of pid element (i.d 123) when link is clicked:
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
Here is my jQuery:
$(document).ready(function () {
$(".link").click(function () {
let pid = $(this).parent(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
}
});
But I get pid is: undefined
How can I fix this?
You have to use .closest() and not .parent(), because .parent() only goes 1 step up. .closest() will continue until it reach the top or finds the element.
$(document).ready(function() {
$(".link").click(function() {
let pid = $(this).closest(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
I'm trying to write a script that if a parent element has a chlid then add class onlick, here's what i've got so far. any help would be much appreciated, p.s i know much code is terrible: The parent element is ".pinGrid" and the child is "#pin" and the onclick is "#like"
NOTE: I'm trying to add the class to the child element. The pin boxes are on a for each loop.
JS:
$(document).ready(function(){
$("#like").click(function () {
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
});
});
HTML:
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
You can just use the ID selector to get the child element, then use toggleClass() with the checked status
$(document).ready(function() {
$(".like").change(function() {
$(this).closest('.pin').toggleClass("pincard-checked", this.checked);
});
});
.pincard-checked {
background-color: lightgrey;
}
.pin {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
</div>
</div>
I am assuming that, if .pinGrid has #pin, you want to fire click() of #like, if thats so,
$(document).ready(function(){
$("#like").click(function () {
//YOUR ACTION
});
($('.pinGrid #pin').length>0)?$("#like").trigger("click"):alert("NOT FOUND");
//IF YOU WANT TO ADD CLASS
//($('.pinGrid #pin').length>0)?$("#pin").addClass("pincard-checked"):alert("NOT FOUND");
});
You need to use:
var pingrid= $('.pinGrid');
$("#like").click(function () {
if(pingrid.hasClass( "#pin" ))
pingrid.find('#pin').toggleClass("pincard-checked");
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.my_class {
color:red;
}
</style>
<script>
$(document).ready(function () {
$("#like").click(function () {
if ($('.pinGrid #pin1').length > 0) {
$('.pinGrid #pin1').toggleClass("my_class")
}
});
});
</script>
<body>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
</body>
</html>
You just need to replace
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
with
$('.pinGrid').find( ".pin" ).toggleClass("pincard-checked");
Here is the fiddle link
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a requirement of toggling the color of a clicked <div> from red to green & green to red. I am using jquery in my page. Please suggest me the best possible code to fulfill the requirement.
My code is as follows:
<htmL>
<head>
<script src="jquery-1.10.2.js">
window.onload = initPage;
function initPage() {
}
function tileclick() {
}
</script>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background: #00FF00;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys33" class="cell">33
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys43" class="cell">43
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My initial page should appear green in color as shown below.
Each block should toggle green to red when clicked & vice-versa.
Please help me achieve this requirement.
You can use a start with selector to match all you divs that id starts with sys and then use toggleClass to switch the classes.
Code:
$("div[id^='sys']").click(function(){
$(this).toggleClass("cell cell2");
});
Demo: http://jsfiddle.net/IrvinDominin/tsL8a/
Use toggleClass() in jquery
<style>
.red{
background : red;
}
</style>
$(function() {
$(".cell").on("click" , function(e) {
$(this).toggleClass("cell red");
});
});
You can use jQuery toggleClass method (See the doc).
Add a class for red cells like :
.red_cell {
background-color: red;
}
Then something like :
$('.cell').click(function() {
$(this).toggleClass('red_cell');
});
use:
$(".cell").click(function(){
var clr = $( this ).css("background-color").toString();
var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
$(this).css({
"background":""+clr+""
});
});
without changing css markup.
DEMO. hope it'll help you. cheers !
$(".cell").click(function(){
if($(this).hasClass('red')) {
$(this).removeClass('red');
}else{
$(this).addClass('red');
}
});
and simply add a class to CSS.
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});