Using <option> to scroll to anchor, then opening section
<p>I'm trying to code a <code>&lt;select&gt;</code> dropdown so that when certain <code>&lt;option&gt;</code> are clicked, the page will scroll down to the options sections using regular anchors/ids. I'm assuming I can do that by calling a function onchange, like this maybe:</p>

<pre><code>&lt;select class="jump-select" onchange="scrollTo();"&gt;
     &lt;option selected="selected"&gt;Jump to Section&lt;/option&gt;
     &lt;option value="#general-info"&gt;General Information&lt;/option&gt;
     &lt;option value="#venue-info"&gt;Venue Information&lt;/option&gt;
     &lt;option value="#deal-info"&gt;Deal Information&lt;/option&gt;
     &lt;option value="#doc-mgmnt"&gt;Document Management&lt;/option&gt;
     &lt;option value="#buyer-info"&gt;Buyer Information&lt;/option&gt;
     &lt;option value="#billing-info"&gt;Billing and Additional Information&lt;/option&gt;
     &lt;option value="#expenses"&gt;Expenses&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>But on top of that the sections are currently using some jQuery which hide them on load, and then reveal them when the <code>&lt;h2&gt;</code> of that section is clicked. (I actually got some help with that on this forum as well.)</p>

<p>Here is the code for the hiding/showing of the sections. Ideally I need this to also be integrated into the use of the <code>&lt;option&gt;</code> anchoring functionality. So for example, someone selects "Expenses". The page scrolls down to the "Expenses" section, and then the section expands or becomes visible.</p>

<pre><code>//Toggles Main Sections

$(document).ready(function(){

  //Hide (Collapse) the toggle containers on load
  $(".toggle-container").hide();

  //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
  $("h2.trigger").click(function(){
     $(this).toggleClass("active").next().slideToggle("slow");
     return false; //Prevent the browser jump to the link anchor
   }); 

 });
</code></pre>

<p>Any help is greatly appreciated. If anything is unclear please let me know and I will try to reword or explain better.</p>

<p>Here is the basic beginnings of the sections. I won't post the entire thing, they get pretty long:</p>

<pre><code>        &lt;div class="section" id="expenses"&gt;
            &lt;div class="jump"&gt;
                &lt;select class="jump-select"&gt;
                    &lt;option selected="selected"&gt;Jump to Section&lt;/option&gt;
                &lt;/select&gt;
                &lt;a href="#"&gt;Edit&lt;/a&gt;
            &lt;/div&gt;
            &lt;h2 class="trigger" id="title-expenses"&gt;&lt;a href="#"&gt;Expenses&lt;/a&gt;&lt;/h2&gt;
            &lt;div class="toggle-container"&gt;
</code></pre>

<p>"toggle-container" being the div that is hidden/shown by the <code>&lt;h2&gt;</code>.</p>
