CODEWITHSUNDEEP
jquerycsstoggle
Rae
Rae

Reputation: 1

Issue toggling css transform with jquery

I am trying to toggle a css transform with jquery. I can get the first half working on click, but cannot get it to toggle.

HTML:

<div class="team-member">
                <div class="team-member-bio">
                    <h3>Team Member Name</h3>
                    <p>Team Member Title</p>
                    <p>
                       Team member bio content. 
                    </p>
                </div>
                <img class="team-member-img" src="" alt="">
                <div class="team-member-content">
                    <h3 class="team-member-name">Team Member Name</h3>
                    <p class="team-member-title">Team Member Title</p>
                </div>
            </div>

CSS:

.team-member {

margin: 0 .75rem;
height: 30rem;
width: 25rem;
overflow: hidden;
position: relative;

}
.team-member-bio {

    position: absolute;
    z-index: 15;
    background-color: white;
    top: -100%;
    height: 100%;
    width: 100%;
    transition: all .4s;
}

JQuery (that does not work):

$(".team-member").click(function(){

    var bio = $(this).children('.team-member-bio');

    bio.toggle(
        function(){bio.css("transform", "translateY(100%)");},
        function(){bio.css("transform", "translateY(-100%)");}
      );
});

JQuery (that DOES work, but does not have toggle functionality):

$(".team-member").click(function(){

    var bio = $(this).children('.team-member-bio');

    bio.css("transform", "translateY(100%)");
});

Upvotes: 0

Views: 182

Answers (1)

Adrian Cobo
Adrian Cobo

Reputation: 173

I don't know what you are trying but thats not the correct use of toggle. See: https://api.jquery.com/toggle/ I think you might need an animation https://www.w3schools.com/css/css3_animations.asp

$(".team-member").click(function(){
    var bio = $(this).children('.team-member-bio');
    bio.toogleClass('transformed100');
});

css

.team-member-bio {
  transform: translateY(-100%);
}
.team-member-bio.transformed100 {
  transform: translateY(100%);
}

Upvotes: 1

Related Questions