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’ );

Hi harimay

Thank you for the quick reply!

My website is
https://butterflyfoundation.dk/

And I intend to place the button below each of the board members (the section “Hvem er vi?” in the menu)

Is it somehow possible to embed the code into the “text” section in the page editor?

In the same way as they have done in the picture below:
https://lorelleteaches.files.wordpress.com/2012/09/html-visual-editor-tabs.png?w=584

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
https://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
https://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
}

Here is a shorter version of the jQuery part:

jQuery(document).ready(function ($) {
	var $container = $('.harimay_hidden').hide(),
		$open = $('<a href="#" class="button">L?s mere om Diana ↓</a>').insertBefore($container),
		$close = $open.clone().html('Luk ↑').appendTo($container);

	$open.add($close).click(function (e) {
		e.preventDefault();
		$container.slideToggle(1000);
		$open.fadeToggle(500);
	});
});