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


i'm trying code <select> dropdown when <option> clicked, page scroll down options sections using regular anchors/ids. i'm assuming can calling function onchange, maybe:

<select class="jump-select" onchange="scrollto();">      <option selected="selected">jump 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 , additional information</option>      <option value="#expenses">expenses</option> </select> 

but on top of sections using jquery hide them on load, , reveal them when <h2> of section clicked. (i got on forum well.)

here code hiding/showing of sections. ideally need integrated use of <option> anchoring functionality. example, selects "expenses". page scrolls down "expenses" section, , section expands or becomes visible.

//toggles main sections  $(document).ready(function(){    //hide (collapse) toggle containers on load   $(".toggle-container").hide();    //switch "open" , "close" state per click slide up/down (depending on open/close state)   $("h2.trigger").click(function(){      $(this).toggleclass("active").next().slidetoggle("slow");      return false; //prevent browser jump link anchor    });    }); 

any appreciated. if unclear please let me know , try reword or explain better.

here basic beginnings of sections. won't post entire thing, pretty long:

        <div class="section" id="expenses">             <div class="jump">                 <select class="jump-select">                     <option selected="selected">jump 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 div hidden/shown <h2>.

remove hash marks values of <option> tags, remove onchange attribute , add code.

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

Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -