php - Toggle function: Remember the position -
i used function toggle if refresh page, remember position of toggle. try use session can't find way update session (when user want see more or less).
here code:
<script language="javascript"> function toggle(showhidediv, switchimgtag) { var ele = document.getelementbyid(showhidediv); var imageele = document.getelementbyid(switchimgtag); if(ele.style.display == "block") { ele.style.display = "none"; imageele.innerhtml = '<img src="more.png"">'; }else { ele.style.display = "block"; imageele.innerhtml = '<img src="less.png">'; } } </script> <?php if(empty($_session["toggle"])){ $_session["toggle"] = 'show'; }?> <a id="imagedivlink" href="javascript:toggle('contentdivimg', 'imagedivlink');"><img src="lesss.png"></a>title <?php if($_session["toggle"] == 'show'){ ?> <div id="contentdivimg" style="display: block;"> <?php $_session["toggle"] = 'hidden'; } if($_session["toggle"] == 'hidden'){ ?> <div id="contentdivimg" style="display: none"> <?php $_session["toggle"] = 'show'; } ?> try show & hide </div>
i second @akam , @chasemoskal suggesting use javascript this.
it should simple as
<html> <head> <script type="text/javascript"> function toggle(showhidediv, switchimgtag) { var ele = document.getelementbyid(showhidediv); var imageele = document.getelementbyid(switchimgtag); if(ele.style.display == "block") { // set toggle cookie on toggle document.cookie = 'toggle=hide' ele.style.display = "none"; imageele.innerhtml = '<img src="more.png"">'; }else { // set toggle cookie on toggle document.cookie = 'toggle=show' ele.style.display = "block"; imageele.innerhtml = '<img src="less.png">'; } } </script> </head> <body> <a id="imagedivlink" href="javascript:toggle('contentdivimg', 'imagedivlink');"><img src="lesss.png"></a>title <div id="contentdivimg" style="display:block">try show & hide</div> <script type="text/javascript"> // run @ end of body dom ready // dont beleave me? reade this: https://groups.google.com/forum/#!topic/closure-library-discuss/g-7ltdavy0e (function(){ // cookie want check using fancy-pants regex var cookie = document.cookie.replace(/(?:(?:^|.*;\s*)toggle\s*\=\s*([^;]*).*$)|^.*$/, "$1"); if (cookie === 'hide') // if cookie says hide, use toggle function // user wont see change because still running way before readystate complete toggle('contentdivimg', 'imagedivlink'); }()) </script> </body> </html> this uses document.cookie set toggle cookie either show or hide. if toggle cookie hide toggle function gets called before page finishes loading.
note while work when file served remote server (or localhost) on http(s), won't work if file retrieved using file: protocol because cookies associated domain.
if want learn more using cookies in javascript or want copy , past useful functions (and small framework) check out mdn article
Comments
Post a Comment