How can I insert both JS, CSS and HTML into a specific WP-page?

This will add a button on the footer section of you WordPress page
Copy and past this code in the themes functions.php file

If you want to add it some whee else let me know

function wp_footer_callback() { ?>
<div class=”example1″>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>
</div>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘.example1’).hide().before(‘Læs mere om Diana ↓‘);
jQuery(‘.example1’).append(‘Luk ↑‘);
jQuery(‘a#open-example1’).click(function() {
jQuery(‘.example1’).slideDown(1000);
jQuery(‘#open-example1’).fadeOut(500);
return false;
});
jQuery(‘a#close-example1’).click(function() {
jQuery(‘.example1’).slideUp(1000);
jQuery(‘#open-example1’).fadeIn(500)
return false;
});
});
</script>

<style type=”text/css”>
.button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: #eee;
border: 0;
color: #333;
cursor: pointer;
font-family: “Lucida Grande”, Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 6px 4px;
text-decoration: none;
position: relative
}

.example1 p,
.example2 p {
border: 1px solid #eee;
background: #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
padding: 10px;
margin: 10px 0
}
</style>

<?php
}
add_action( ‘wp_footer’, ‘wp_footer_callback’ );

Add this in the Text editor of the board members Section
Notes: We should not change the Class an id of the HTML

<div class="harimay_main">
	<div class="harimay_hidden">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p>
	</div>
</div>

Add this Line in file
http://butterflyfoundation.dk/wp-content/themes/oshin/js/script.js
As below

jQuery( document ).ready( function(){
jQuery('.harimay_hidden').hide().before('<a href="#" id="open-harimay-hidden" class="button" style="display: inline;">Læs mere om Diana ↓</a>');
	jQuery('.harimay_hidden').append('<a href="#" id="close-harimay-hidden" class="button">Luk ↑</a>');

	jQuery('a#open-harimay-hidden').click(function() {
		jQuery( this ).closest( '.harimay_main' ).find('.harimay_hidden').slideDown(1000);
		jQuery( this ).closest( '.harimay_main' ).find('#open-harimay-hidden').fadeOut(500);
		return false;
	});

	jQuery('a#close-harimay-hidden').click(function() {
		jQuery( this ).closest( '.harimay_main' ).find('.harimay_hidden').slideUp(1000);
		jQuery( this ).closest( '.harimay_main' ).find('#open-harimay-hidden').fadeIn(500)
		return false;
	});
});

Add this Line in file
http://butterflyfoundation.dk/wp-content/themes/oshin/style.css
As below

.harimay_main .button {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: #eee;
	border: 0;
	color: #333;
	cursor: pointer;
	font-family: "Lucida Grande", Helvetica, Arial, Sans-Serif;
	margin: 0;
	padding: 6px 4px;
	text-decoration: none;
	position: relative
}

.harimay_main .harimay_hidden p {
	border: 1px solid #eee;
	background: #eee;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 400px;
	padding: 10px;
	margin: 10px 0
}