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
Post a Comment