Progress Bar Hiding Content and Reveal it Upon Collapse

Question

I have a progress bar on the website and content which should be hidden until progress-bar ending.

As only progress-bar reaches 100% it should disappear and reveal the hidden content.

Please find the code here - https://jsfiddle.net/CEBEP/0gt1w8qk/10/

    <h2>
    Some text before Visible
    </h2>
    <!-- Progress bar -->
                                <div id="progress_bar" class="ui-progress-bar ui-container">
                                    <div class="ui-progress" style="width: 79%;">
                                        <span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
                                    </div>
                                </div>
                                <!-- /Progress bar -->
    <div class="hidden_content">
    Hidden content
    </div>

Thank you in advance for help and time.

Answer 1

Call hide when the page is open

$(function(){
$('.hidden_content').hide();
});

Call show when the loader has reached 100%;

$('.hidden_content').show();

demo