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;
    });