Button onclick fires but no action

JavaScript
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/5JxL7/

It’s a play button that flips a div to shop a youtube clip.

I’d like reverse the action and hide the clip by clicking the close button.

The close on click alert fires but I can’t remove the class name


<!DOCTYPE html>
<html lang="en">

	<head>	
		<meta charset="UTF-8">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="robots" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

		<!--jQuery-->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

		<!--css-->

		<style type="text/css">
			*{
				font-family: sans-serif;
			}
    		.hidden{
    			display: none;
    		}
    		.flip {
			  	-webkit-perspective: 800;
				perspective: 800;
			  	text-align: center;
			 	margin: 20px 0 0 0;
			}

			.flip .card.flipped {
			  -webkit-transform: rotatex(180deg);
			  transform: rotatex(180deg);
			}

			.flip .card {
			  -webkit-transform-style: preserve-3d;
			  -webkit-transition: 0.5s;
			  transform-style: preserve-3d;
			  transition: 0.5s;
			}
			.flip .card .face {
			  -webkit-backface-visibility: hidden ;
			  backface-visibility: hidden ;
			  z-index: 2;
			
			}

			.flip .card .front{
				background: red;
				color: white;
				padding: 10px;
				margin: 0 auto;
				width: 100px;
			}

			.flip .card .front:hover{
				cursor: pointer;
			}

			.flip .card .back {
			  -webkit-transform: rotatex(-180deg);
			  transform: rotatex(-180deg);
			}
			.inner{margin:0px !important;}

			.hero{
			  background-size: cover;
			  height: 400px;
			  position: relative;

			}
			.player iframe{
			    border: 5px solid red;
			    margin: 20px 0 0 0;
			}
  			
  			.player .closing{
  				background: black;
  				color: white;
  				display: block;
  				margin: 20px auto 0 auto;
  				padding: 10px;
  				width: 100px;
  			}

			
		</style>



		<title>Title of the document</title>
	</head>

<body>

	<div class="flip">
		<div class="card">
			<div class="face front">
				<div>Play</div>
			</div>	
			<div class="face back">
				<div class="player">

					<iframe width="560" height="315" src="//www.youtube.com/embed/FKkejo2dMV4" frameborder="0" allowfullscreen></iframe>

					<span class="closing">Close</span>

				</div>
			</div>	
		</div>	
	</div>

	<script>


		$('.flip').click(function(){
			$(this).find('.card').addClass('flipped');
			$('.card .front').addClass('hidden');
		});

		$('.player .closing').on('click', function(){
			alert('close');
			$('.front').removeClass('hidden');
			$('.flip .card').removeClass('flipped');
		})

	</script>
</body>

</html>
2

Hi ttmt,

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped');
    $('.card .front').addClass('hidden');
});

$('.player .closing').on('click', function(){
    alert('close');
    $('.front').removeClass('hidden');
    $('.flip .card').removeClass('flipped');
});

The problem here is your first click handler is attached to div.flip, which is your main container element. When you click the close button, the first handler is firing again and so your video stays visible.

The solution is to change the selector to something more specific:

$('.front').click(function(){
    card.addClass('flipped');
    cardFront.addClass('hidden');
});
3

Bit of a delay from me but thanks for this.