Help me add a feature to combined jQuery codes

I’ve combined a jquery ‘scroll’ code with jquery ‘slide toggle’ code (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle)

The ‘scroll’ code slides a tab/bar horizontally across the web page, when the page is scrolled down.

And when you ‘click’ the text on the tab/bar, the ‘slide toggle’ code makes a vertical ‘drop-down section’ appear, successfully, (and the vertical ‘drop-down section’ slides back up when you ‘click’ the text again).

And when you scroll up the web page, the ‘scrolled tab/bar’ slides back to hide.

However, I’d like the vertical ‘drop-down section’ to automatically slide back up, when the scrolled tab/bar slides back to hide.

Currently, if you scroll down the page again, the vertical ‘drop-down section’ is open(dropped-down) if the text hasn’t been manually clicked to close it.

Here’s the code:

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.scrollme.js"></script>
<script src="js/jquery.scrollme.min.js"></script>

<div class="scrollme">
<div class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="1220"
        data-rotatez="0"
>
<div id="flip">Click + - </div>
<div id="panel">Hello world!</div>
</div>
</div>

Any ideas on making the ‘slide toggle’ to toggle up, when the ‘scrolled tab/bar’ slides to hide, will be appreciated.

2 posts were merged into an existing topic: Need help with centering and expanding text in drop-down