SlideUp on fontawesome icon in slideToggle

Question

I created an image file which, when you click on it, creates a text box with the slideToggle effect. When I click on the field again to close the text field, slideToggle works. But when the text slid down, I put the fa-angle-up fontawesome icon in the text box, so visitors can close the text box instead of clicking on the image again. Here is my fiddle . Now I can’t figure out how to make the fa-angle-up icon.

If I need to give more information, I will be happy to help.

I tried this code but nothing happens:

     (function($) { 
  $('.popup_trigger').on('click', function(e, ui) {
    $('.popup_community', $(this).parent('.wrapper_community')).slideToggle('slow');    
    e.preventDefault(); 
  });   
  $('.fa-angle-up').on('click', function(e, ui) {
    $('.popup_community', $(this).parent('.wrapper_community')).slideUp('slow');    
    e.preventDefault(); 
  });   

})(jQuery);

Answer 1

on click , :

$("i.fa").on("click", function () {
    $(this).parents(".popup_community").slideToggle('slow');
});

()

Answer 2

, urself -

$('.popup_trigger').trigger('click') 

, , . .

: http://jsfiddle.net/ef5qL4t0/4/

Answer 3

You are using van:

$('.popup_trigger').on('click', function(e, ui) {
		$('.popup_community', $(this).parent('.wrapper_community')).slideToggle('slow');	
		e.preventDefault();	
	});	
	$('.fa').on('click', function(e, ui) {
		$('.popup_community').slideToggle('slow');	
		e.preventDefault();	
	});	
	

.wrapper_community_text h2, .popup_community h2 {
 		font-weight:bold;
 		font-size:24px;
 		padding:15px 0 5px;
 		margin:0;
 		
 		
 	}
 	
 .wrapper_community_text h3, .popup_community h3 {
 	font-size:10px;
 	letter-spacing:0.2em;
 	margin:0;
 	}	
 	
 	
 	.wrapper_community_text h3.memberTitle, .popup_community h3.memberTitle  {
 	font-size:18px;
 	letter-spacing:0;	
 	}
 	
  .wrapper_community_text .fa-map-marker, .popup_community .fa-map-marker {
  	color:#808184;
  	padding:0 5px 0 0px;
  	font-size: 1.6em;
  }	
  
  .wrapper_community a:hover  {

  	
  }
  
  .wrapper_community_text a, .popup_community a{
  	color:#B9150B;
  	
  }
  
    .wrapper_community_text a:hover, .popup_community a:hover {
  	color:#404040;
  	text-decoration:none;
  	
  }

  .wrapper_community_text p, .popup_community p{
  	font-size:13px;
  	
  }

.wrapper_community {
	max-width:226px;
	margin:0 auto;
	
}

.popup_community {
	background:white;
	max-width:226px;
	webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
position:absolute;
z-index:1;
	
}

.popup_community .fa-angle-up{
	float:right;
	padding-right:15px;
}

.popup_community .fa-twitter, .popup_community .fa-facebook, .popup_community .fa-angle-up {
	color:#808184;
	font-size:22px;
}

.popup_community .fa-twitter:hover, .popup_community .fa-facebook:hover, .popup_community .fa-angle-up:hover {
	color:#B9150B;
}	
	
.popup_community_markup  {
	padding:20px;
}

.popup_trigger {
	 position: relative;
	    overflow: hidden;
}
.popup_trigger:hover {
	opacity:1;	
	background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
	<div class="col-md-3 central">
					<div class="row" style="margin-top:20px; margin-bottom:20px;">	
					<div class="wrapper_community">
						<a class="popup_trigger" href="#">
							<div data-content="Click to read more" class="click_community">
                                <img src="http://placehold.it/137x137" alt="test" width="226" height="226">
							</div>
						</a>
	
		 				<div class="popup_community" style="display:none;position:absolute; min-width:226px;">
		 					<h2>Test Person</h2>
		 					<h3><span><i class="fa fa-map-marker"></i></span>Location</h3>
		 					<p class="popup_community_markup">Some text here></p>			 					
		         			<p style="padding-left:20px; text-align:left;">
		         				<a href="https://<?php print $mentor_twitter ;?>" target="_blank"><i class="fa fa-twitter"></i></a>
		         				<a href="https://<?php print $mentor_fb ;?>" target="_blank"><i class="fa fa-facebook"></i></a>
		         				<i class="fa fa-angle-up"></i>
		         			</p>
		         			
		 				</div>				
			 			<div class="wrapper_community_text" >
				 			<h2>Test Person</h2>
				 			<h3><span><i class="fa fa-map-marker"></i></span>Location</h3>	
				 		</div>					
					</div>
				</div>	
				</div>	

Run code