<style>
.about-help-box {
border: none;
overflow: hidden;
transition: max-height 0.3s ease, max-width 0.3s ease;
max-height: 0;
max-width: 0;
padding: 0;
}
.about-help-content {
display: none;
padding: 10px;
background-color: #fff;
}
.about-help-content video {
width: 100%;
height: auto;
}
.about-shrink-button {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.about-help-link {
cursor: pointer;
color: blue;
text-decoration: underline;
display: flex;
align-items: center;
}
.about-help-link img {
width: 20px;
height: 20px;
margin-right: 5px;
}
</style>
<div class="about-help-link" id="aboutHelpHeader">
<img src="https://img.icons8.com/ios-glyphs/30/000000/info.png" alt="Info Icon">
<span>Help me</span>
</div>
<div class="about-help-box" id="aboutHelpBox">
<div class="about-help-content" id="aboutHelpContent">
<video controls>
<source src="link-to-your-video-here" type="video/mp4">
Your browser does not support the video tag.
</video>
<button class="about-shrink-button" id="aboutShrinkButton">Shrink</button>
</div>
</div>
<script>
document.getElementById('aboutHelpHeader').onclick = function() {
var helpBox = document.getElementById('aboutHelpBox');
var helpContent = document.getElementById('aboutHelpContent');
if (helpContent.style.display === 'none' || helpContent.style.display === '') {
helpContent.style.display = 'block';
helpBox.style.maxHeight = '500px'; // Adjust as needed
helpBox.style.maxWidth = '600px'; // Adjust as needed
helpBox.style.padding = '10px';
} else {
helpContent.style.display = 'none';
helpBox.style.maxHeight = '0';
helpBox.style.maxWidth = '0';
helpBox.style.padding = '0';
}
};
document.getElementById('aboutShrinkButton').onclick = function() {
var helpBox = document.getElementById('aboutHelpBox');
var helpContent = document.getElementById('aboutHelpContent');
helpContent.style.display = 'none';
helpBox.style.maxHeight = '0';
helpBox.style.maxWidth = '0';
helpBox.style.padding = '0';
};
</script>