SharePointLearningPlatform

import.html

<script src="https://gist.githubusercontent.com/Brachamul/e3a12e19ef00ba47c8ff/raw/ae9dc74e8b203b036f2a7a21f9aeb6a4a882860f/script.js"></script>

script.js

function runScript() {
	// On regarde si jQuery est chargé, sinon on patiente un peu
	if( window.jQuery ) {
		// jQuery est chargé !
		jQuery( document ).ready(function(){

			jQuery('.bigimage-deploys').click(function(){
				jQuery(this).toggleClass('active')
			})

			$("head").append("<link rel='stylesheet' href='https://gist.githubusercontent.com/Brachamul/e3a12e19ef00ba47c8ff/raw/ae9dc74e8b203b036f2a7a21f9aeb6a4a882860f/styles.css' type='text/css' media='screen'>");

		})

	} else {
		// jQuery n'est pas chargé, on retente dans 50 milisecondes
		window.setTimeout( runScript, 50 )
	}
}

runScript()

styles.css

	.bigimage-deploys { max-height: 120px; overflow: hidden; transition: max-height 2s ease-in-out; position: relative; border-radius: 3px; }
	.bigimage-deploys.active { max-height: 2000px; }
	.bigimage-deploys:after {
		transition: all 2s;
		opacity: 1;
		content: "+";
		color: white; text-align: center;
		font-size: 6em;
		background-color: rgba(0,0,0,0.25);
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
	}
	.bigimage-deploys.active:after { opacity: 0; }