how to toggle a sliding panel with javascript
<p>First time poster here. I've assembled a scrolling website that also has a sliding panel gallery. Which is where the problem is - when a user clicks on a thumbnail, a corresponding large image slides up using an "animate" command. The user is required to click again on the large image to return to the thumbnail view, to navigate further.</p>

<p>THE PROBLEM: It turns out this isn't very intuitive. People like to click where they want to click, not in a prescribed / recommended sequence. While in the large image view, nothing else is visible even if a user has clicked on "Home" or some other section, which scrolls into position upon click but is invisible behind the large gallery image.</p>

<p>I need to find the code to close the large image view when a user either clicks on the image, <em>or</em> on any of the other menu sections visible at the bottom,and scroll to the relevant clicked section. All these sections use a "goToByScroll" script. The initial thumbnail view of the gallery also slides into view using a "goTobyScroll" script.</p>

<p><a href="https://forum.jquery.com/topic/help-advice-on-how-to-toggle-using-javascript" rel="nofollow">Per this response from the help forum on the jquery site</a>, the # image and # wrapper are what need to close upon click.</p>

<p>Thanks for reading, and for any help. </p>

<p>UPDATE: (Apologies at the belated update. As an amateur coder this stuff can be intimidating - I depend on others to actually do anything that is more than mere cut-paste:-)Thanks to both posters for taking the time and trouble. For the benefit of those visiting via search, here is the code that actually worked in this case: </p>

<hr>

<p>$('#top').live('click',function(){
                    $this = $('#wrapper > img');
                    $('#description').empty().hide();</p>

<pre><code>                $('#thumbsWrapper').css('z-index','100')
                .stop()
                .animate({'height':'100%'},speed,function(){
                    var $theWrapper = $('#wrapper &gt; img');
                    $('#panel').css('height','0px');
                    $theWrapper.css('z-index','0');
                    /* 
                    remove the large image element
                    and the navigation buttons
                     */
                    $this.remove();
                    $('#prev').hide();
                    $('#next').hide();
                });
</code></pre>

<h2>                });</h2>

<p>Thanks also to everybody involved with running/moderating SO.</p>
