lovephp Posted May 12, 2016 Share Posted May 12, 2016 (edited) i have the jquery show/hide tpggle coding and what im looking for is if i expand it the result stays same even if page is refreshed and if i hide also the result then stays same according to the action. how to get it done i surely am getting no idea so would appreciate someones input on this <html> <head> <style> .spacer { display:block; } .expshow, .expless { cursor:pointer; background:#eee; border:1px solid #000; border-radius:3px; padding:5px 8px; color:#FF3333; } .expless {margin-top:10px;display:inline-block;} .info p { margin-bottom:0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function (){ $(".info").hide(); $(".expshow").click(function(event) { $(this).parent(".expToggle").children("div.info").slideToggle(300); $(this).text($(this).text() == '[+]' ? '[-]' : '[+]'); }); $(".expless").click(function(event) { $(this).parent(".info").slideToggle(300); $(".expshow").text("[+]"); }); }); </script> </head> <body> <div class="expToggle"> <span class="expshow">[+]</span> <div class="info"> <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <br/> <span class="expless">[-]</span> </div> </body> </html> Edited May 12, 2016 by lovephp Quote Link to comment Share on other sites More sharing options...
Solution Psycho Posted May 12, 2016 Solution Share Posted May 12, 2016 This works but . . . if the initial state should be to be collapsed there will be a short execution of the collapse functionality on page load <script> $(document).ready(function (){ //Action for priomary expand/collapse button $(".expshow").click(function(event) { $(this).parent(".expToggle").children("div.info").slideToggle(300); if($(this).text() == '[+]') { $(this).text('[-]'); //Create expand cookie document.cookie = "expand=1;expires=Thu, 31 Dec 2020 12:00:00 UTC"; } else { $(this).text('[+]'); //Delete expand cookie document.cookie = "expand=;"; } }); //Action for secondary collapse button $(".expless").click(function(event) { $(".expshow").click(); }); //On load, check if expand cookie is set. //If not, execute click event to hide div if(document.cookie.indexOf("expand=1") == -1) { $(".expshow").click(); } }); </script> 1 Quote Link to comment Share on other sites More sharing options...
Strider64 Posted May 12, 2016 Share Posted May 12, 2016 You might want to check this out -> https://github.com/js-cookie/js-cookie 1 Quote Link to comment Share on other sites More sharing options...
lovephp Posted May 13, 2016 Author Share Posted May 13, 2016 This works but . . . if the initial state should be to be collapsed there will be a short execution of the collapse functionality on page load <script> $(document).ready(function (){ //Action for priomary expand/collapse button $(".expshow").click(function(event) { $(this).parent(".expToggle").children("div.info").slideToggle(300); if($(this).text() == '[+]') { $(this).text('[-]'); //Create expand cookie document.cookie = "expand=1;expires=Thu, 31 Dec 2020 12:00:00 UTC"; } else { $(this).text('[+]'); //Delete expand cookie document.cookie = "expand=;"; } }); //Action for secondary collapse button $(".expless").click(function(event) { $(".expshow").click(); }); //On load, check if expand cookie is set. //If not, execute click event to hide div if(document.cookie.indexOf("expand=1") == -1) { $(".expshow").click(); } }); </script> does the job bro thanks aton. i thought we had to get it done through php. Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 13, 2016 Share Posted May 13, 2016 does the job bro thanks aton. i thought we had to get it done through php. You could set the initial hide/show state on page load using PHP, but you would still have to set/remove the cookie in JavaScript since that action is taking place client-side. Well, technically, you could have a JavaScript call that uses PHP to set/remove the cookie, but it would still have to be initiated in JS. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.