jQuery add class to child element by clicking parent

Question

I am trying add the a css class (.fadeInScale) to a child div by clicking the parent div.

Here is the HTML structure. In the parenthesis is the location I need to add the .fadeInScale class.

<div class="container js-team-container">
  <div class="team__item team__link js-team-card-trigger ">
    <div class="team__card js-team-card (.fadeInScale)">
        <div class="team__card--top"></div>
        <div class="team__card-content">
            <p>Sample text</p>
        </div>
    </div>
    <img class="img--circle team__img" src="http://placehold.it/150x150" />
</div>

Codepen http://codepen.io/jfarr07/pen/zGMzYe

score 2 · Accepted Answer · answered Jul 29 '15 at 02:39

2

$(document).ready(function () {
    $('.js-team-card-trigger').on('click', function (e) {
        $(this).find('.js-team-card').toggleClass('fadeInScale');
    });
});

updated codepen http://codepen.io/anon/pen/rVQzVV

answered Jul 29 '15 at 02:39

atinder

2,080
13
15

Awesome this did just the trick. How would I have .fadeInScale disappear if I clicked outside of .js-team-card? – jacks3 Jul 29 '15 at 02:49
refer http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it – atinder Jul 29 '15 at 03:00

score 0 · Answer 2 · answered Jul 29 '15 at 02:41

Have you tried $(this).find('.js-team-card').toggleClass('fadeInScale');

$(document).ready(function () {
    $('.js-team-card-trigger').click(function (e) {
        $(this).find('.js-team-card').toggleClass('fadeInScale');
      });
});

*, :after, :before {
    box-sizing: inherit;
}

html {
    height: 100%;
}
.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
.team__item {
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin-right: 8%;
}
.team__card {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
    left: -115px;
    margin: auto;
    width: 350px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: -25px;
    z-index: 99;
    visibility: hidden;
    border-radius: 12px;
    background-clip: padding-box;
}
.team__card--top {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.team__card--top:after {
    content:'';
    position: absolute;
    left: 115px;
    top: 25px;
    border-radius: 100%;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 0 500px #fff
}
.team__card-content {
    background: #fff;
    padding: 30px;
}
.team__img {
    -webkit-animation: none!important;
    animation: none!important;
    max-width: 120px;
}
.img--circle {
    border-radius: 50%;
    background-clip: padding-box;
}
.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: .75s;
    -webkit-animation-duration: .75s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.fadeInScale {
    animation-name: fadeInScale;
    -webkit-animation-name: fadeInScale;
    animation-duration: .25s;
    -webkit-animation-duration: .25s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
@keyframes fadeInScale {
    0% {
        -webkit-transform: scale(.75);
        transform: scale(.75);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}
@-webkit-keyframes fadeInScale {
    0% {
        -webkit-transform: scale(.75);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.u-cf:after, .u-cf:before, .u-clearfix:after, .u-clearfix:before {
    content: " ";
    display: table
}

.u-cf:after, .u-clearfix:after {
    clear: both
}

.u-display {
    display: inherit !important
}

.u-display--b {
    display: block !important
}

.u-display--ib {
    display: inline-block !important
}

.u-display--n {
    display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container js-team-container">
    <div class="team__item team__link js-team-card-trigger ">
        <div class="team__card js-team-card">
            <div class="team__card--top"></div>
            <div class="team__card-content">
                <p>Sean believes that behavioral medicine is at an incredible tipping point of innovation thanks to technology and design. He holds a BS in Neuroscience from Columbia University, was an MD/MBA candidate at Harvard, and formerly worked for Google and.</p>
            </div>
        </div>
        <img class="img--circle team__img" src="http://placehold.it/150x150" />
    </div>

score 0 · Answer 3 · answered Jul 29 '15 at 02:41

0

$('.js-team-card-trigger').click(function(){
   $(this).find('.team__card:first-child')
   .addClass('fadeInScale');
})

answered Jul 29 '15 at 02:41

jonode

797
4
15

score 0 · Answer 4 · answered Jul 29 '15 at 02:45

0

$('.team_item').click(function(){
$('.fadeinscale').attr('class', $(this).attr('class'));
}

answered Jul 29 '15 at 02:45

StillLearningGuy

50
11

jQuery add class to child element by clicking parent

4 Answers4