jQuery image click hide/show

Question

i have googled much about this problem but sadly havent found a working solution and i dont have any expertise in javascript sadly.

I want to achieve the following:

1. Having a sticky bar at the bottom of the website (done) which automatically closes after 5 seconds after opening the page (not done)
2. After 5 seconds the sticky bar should automatically slide down and only an orange arrow (which is an image) should be visible

I managed to implement a jquery script which already achieves the content "closing" when i click on the button.

But i cant manage to link the image to do the same functionality as the button and i dont know what to do.

Plus the automatic 5 seconds closing after opening the page is also not implemented yet.

The jquery script:

 jQuery(document).ready(function(){ jQuery('#hideshow').on('click', function(event) { jQuery('#content').toggle('show'); }); });

Here is the working button at the top which hides "Hello World" and at the bottom there is the orange image with the white arrow which sould have the same functionality as the button above to hide the content directly under it.

Code from the "Hello World" and Button

Code from the orange image with the white arrow

Code from the content with orange background under the image with the arrow

Answer 1

Use setTimeout() method, you can learn more about it here So you could do this:

jQuery(document).ready(function(){
    setTimeout(function(){
        jQuery('#content').addClass('hide'); // or toggle using 'show' class
    }, 5000);

    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

In code with arrow button use tag, like:

<div class="bar">
    <a href="#" id="closeButton" class="arrowBtn"><img src="arrow.png" alt="Arrow button"></a>
</div>

Then you could use jQuery to listen on click event on that button:

jQuery('#closeButton').on('click', function(event) {
    event.preventDefault();
    $('#content').toggle('show');
});