Last active
August 29, 2015 13:56
-
-
Save leafred/8799261 to your computer and use it in GitHub Desktop.
Toggle to close and open div with Jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Jquery Panel | |
| * http://www.netspec.com.au/download/panel/ | |
| * | |
| * Copyright (c) 2014 Netspec Australia | |
| * Licensed under the MIT license. | |
| */ | |
| (function($){ | |
| $.fn.show_panel = function(options){ | |
| var setting = $.extend({ | |
| class_index:"", | |
| save_state:"1" | |
| },options ); | |
| var open_class = 'panel_open'+setting.class_index; | |
| var close_class = 'panel_close'+setting.class_index; | |
| this.click(function(){ | |
| var ele = $(this); | |
| var id = ele.attr("id"); | |
| if(ele.hasClass(open_class)){ | |
| ele.addClass(close_class).removeClass(open_class); | |
| ele.parent().next().slideDown(300); | |
| } | |
| else if(ele.hasClass(close_class)){ | |
| ele.addClass(open_class).removeClass(close_class); | |
| ele.parent().next().slideUp(300); | |
| } | |
| if(id==undefined) | |
| return; | |
| if(setting.save_state=="1"){ | |
| if(window.localStorage){ | |
| var new_val = ''; | |
| if(ele.hasClass(open_class)){ | |
| new_val = '0'; | |
| } | |
| else{ | |
| new_val = '1'; | |
| } | |
| if(localStorage.show_panel){ | |
| var str = localStorage.getItem('show_panel'); | |
| str = unescape(str); | |
| var obj = $.parseJSON(str); | |
| var new_item = true; | |
| $.each(obj,function(k,obj2){ | |
| $.each(obj2,function(){ | |
| if(obj2['id']==id){ | |
| new_item = false; | |
| obj2['v'] = new_val; | |
| obj[k] = obj2; | |
| } | |
| }); | |
| }); | |
| if(new_item){ | |
| var arr = {}; | |
| arr["id"] = id; | |
| arr["v"] = new_val; | |
| arr["ci"] = setting.class_index; | |
| obj.push(arr); | |
| } | |
| try{ | |
| localStorage.setItem('show_panel',JSON.stringify(obj)); | |
| } | |
| catch(err){} | |
| } | |
| else{ | |
| try{ | |
| var jason_new = '[{"id":"'+id+'","v":"'+new_val+'","ci":"'+setting.class_index+'"}]'; | |
| localStorage.setItem('show_panel',jason_new); | |
| } | |
| catch(err){} | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| }(jQuery)) | |
| function panel_display(){ | |
| if(window.localStorage){ | |
| if(localStorage.show_panel){ | |
| var show_panel = localStorage.getItem('show_panel'); | |
| show_panel = unescape(show_panel); | |
| var obj = $.parseJSON(show_panel); | |
| var all_open = true; | |
| $.each(obj,function(k,obj2){ | |
| $.each(obj2,function(){ | |
| var ele = $("#"+obj2['id']); | |
| var class_open = 'panel_open'+obj2["ci"]; | |
| var class_close = 'panel_close'+obj2["ci"]; | |
| if(obj2['v']=="0"){ | |
| ele.removeClass(class_close).addClass(class_open); | |
| ele.parent().next().hide(); | |
| all_open = false; | |
| } | |
| else if(obj2['v']=="1"){ | |
| ele.removeClass(class_open).addClass(class_close); | |
| ele.parent().next().show(); | |
| } | |
| }); | |
| }); | |
| if(all_open) | |
| localStorage.removeItem('show_panel'); | |
| } | |
| } | |
| } | |
| if(window.addEventListener){ | |
| window.addEventListener('load',panel_display,false); | |
| } | |
| else if(window.attachEvent){ | |
| window.attachEvent("load",panel_display); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <htm> | |
| <head> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <title>Jquery panel - netspec</title> | |
| <meta name="description" content="Jquery panel live demo" /> | |
| <meta name="keywords" content="Jquery,web design" /> | |
| <script type="text/javascript" src="panel.js"></script> | |
| <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> | |
| <script type="text/javascript"> | |
| $(document).ready(function (){ | |
| $(".h_trigger0").show_panel(); | |
| $(".h_trigger1").show_panel({save_state:0}); | |
| $(".h_trigger2").show_panel({class_index:2}); | |
| }); | |
| </script> | |
| <style> | |
| .p1{width:50%;border:#CCC 1px solid;margin-bottom:8px;background-color:#f3f3f3;padding:5px} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="p1"> | |
| <div class="p1_c"> | |
| <h3><div id="panel1" class="h_trigger0 panel_close">Hot forum topics</div></h3> | |
| <div> | |
| This is a panel with id panel1, click the arrow on the top right hand side to close or open<br/> | |
| this panel uses default setting. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p1"> | |
| <div class="p1_c"> | |
| <h3><div id="panel2" class="h_trigger1 panel_close">Netspec shopping cart</div></h3> | |
| <div class="content_c"> | |
| This is a panel with id panel2, click the arrow on the top right hand side to close or open<br/> | |
| This panel has its own setting for save state, the value 0 means the close or open state is not saved. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p1"> | |
| <div class="p1_c"> | |
| <h3><div id="panel3" class="h_trigger2 panel_close2">Netspec shopping cart</div></h3> | |
| <div class="content_c"> | |
| This is a panel with id panel2, click the arrow on the top right hand side to close or open<br/> | |
| This panel has different style, the class_index is set to 2, so the css class panel_close2 and panel_open2 are used. | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .h_trigger0,.h_trigger1{cursor:pointer;width:100%;height:36px;} | |
| .panel_close{background:url(http://www.netspec.com.au/library/panel/src/images/close-open.png) 94% -36px no-repeat;} | |
| .panel_open{background:url(http://www.netspec.com.au/library/panel/src/images/close-open.png) 94% 0px no-repeat;} | |
| .h_trigger2{cursor:pointer;width:100%;height:30px;} | |
| .panel_close2{background:url(http://www.netspec.com.au/library/panel/src/images/close-open2.png) 94% -30px no-repeat;} | |
| .panel_open2{background:url(http://www.netspec.com.au/library/panel/src/images/close-open2.png) 94% 0px no-repeat;} |
It is great to use in mobile web as a side menu
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Features
Light weight Jquery plug-in
Easy to setup
Support multiple panels with different styles in one page
Optional to save state
Install steps
put js and css file inside head
give id and class to the panel