Using <option> to scroll to anchor, then opening section

I'm trying to code a <select> dropdown so that when certain <option> 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:

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

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

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

//Toggles Main Sections

$(document).ready(function(){

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

  //Switch the "Open" and "Close" sta开发者_StackOverflow社区te 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
   }); 

 });

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

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

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

"toggle-container" being the div that is hidden/shown by the <h2>.

Remove the hash marks from the values of the <option> tags, remove the onchange attribute and add this to your code.

$('.jump-select').change(function() {
    var cTarget = $(this).val();
    window.location.hash = cTarget;
});

You can add a change handler to do the work here, using that selector you already have in the values:

$(".jump-select").change(function() {
  var val = $(this).val();
  $(val + ":hidden").slideDown("slow").prev().addClass("active");
  window.location.hash = val;
});

The :hidden selector is because there's no reason to mess with it if it's already expanded (:visible).

If you want a little bit of flair to it, you can animate down to that section instead of jumping there, like this:

$(".jump-select").change(function() {
  var val = $(this).val();
  $(val + ":hidden").slideDown("slow").prev().addClass("active");
  $("html, body").animate({ scrollTop: $(val).scrollTop() }, 200);
});

You could subtract some amount if you didn't want it exactly at the top, or use $(val).prev().scrollTop() if you want the <h2> at the very top of the window, included in the scrolled view.

well without knowing the structure of your html page im gonna guess here

try adding this in your javascript section

        $('.jump-select').change(function() {
                    var a = $(this).val();
        $(a).find('h2.trigger').click();
                    window.location.hash = a;
    });